html {font-family: sans-serif;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;}
body {margin: 0px;}
fieldset {border:1px solid silver;margin:0;padding: 0.42em 0.625em 0em;background-color:#DADADA;font-size:137%;margin-top:5px;}
button,input,select,textarea {font-family: inherit;font-size: 100%;margin: 0;}
h1, h2, h3, h4, h5, h6, p, ul, ol {margin: 0;}
h1 {float:left;font-size: 1.5em;}
article {padding:0em 4em;}
p {margin-bottom: 18px;}
input[type="number"] {width: 86px;}
input[type="number"]::-webkit-inner-spin-button {opacity: 1;}
.block {margin: 0 auto;padding: 0em 0em;}
.red {color:red;} .blue {color:blue;}
.center {text-align:center;}
#maxwidth {max-width:1280px;margin-top: 54px;}
#maxwidth2 {max-width:1280px;margin-top: 50px;}
#maxwidth3 {max-width:1280px;margin-top: 54px;}
#maxwidth4 {max-width:1280px;margin-top: 50px;}
.kost {display:inline-block;width:300px;height:250px;float:right;margin: 24px 0px 0px 5px;cursor: pointer;}
.kost2 {display:inline-block;width:300px;height:250px;float:left;margin: 5px 5px 0px 0px;clear: left;cursor: pointer;}
.kost3 {display:inline-block;width:300px;height:250px;float:left;margin: 5px 5px 0px 0px;clear: left;cursor: pointer;}
.kostka {clear: right;margin: 5px 0px 0px 5px;float: right;}
.english {float: right;margin-right: 10px;}
/* menu */
.topnav {background-color: #3778C2;position: fixed;top: 0;width: 100%;z-index: 2;}
.topnav a {float: left;display: block;color: white;text-align: center;text-decoration: none;font-size: 37px;}
.active {background-color: #28559A;color: white;}
.topnav .icon {display: none;}
.topnav a:hover, .dropdown2:hover .dropbtn2 {background-color: #555;}

.rowne {margin: 0 auto;max-width: 1280px;}
.logo1{color: #00FFFF;}

.dropdown2 {
  float: left;
  overflow: hidden;
}

.dropdown2 .dropbtn2 {
  font-size: 17px;  
  border: none;
  outline: none;
  color: white;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
  padding:0;
  border-right: 2px solid #00FFFF;
  padding-left: 9px;
  padding-right: 9px;
}

.dropdown-content2 {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content2 a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content2 a:hover {
  background-color: #ddd;
}

.dropdown2:hover .dropdown-content2 {
  display: block;
}
/* koniec menu */

/* kopiuj */
.tooltip {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 140px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  top: 150%;
  left: 50%;
  margin-left: -75px;
  opacity: 0;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}
.okno {font-size: 24px;width: 33%;}
/* koniec kopiuj */
.licznik {font-size: 24px;background-color: #3778C2;color: white;margin-right: 5px;}
.menuprawo {float: right;}
.menuprawo a {font-size: 17px;border-right: 2px solid #00FFFF;padding-left: 9px;padding-right: 9px;}
.buttonwtyczka {font-size: 17px; margin-left: 3px;border: 0px; background-color: #3778C2; color: white;}
/* socialki */
.dropbtn {
  background-color: white;
  color: black;
  border: 2px solid #555555;
  cursor: pointer;
  font-size: 24px;
}
.dropdown {
  float: right;
  position: relative;
  display: inline-block;
  line-height: 0.8;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
.dropdown-content a {
  color: black;
  padding: 12px 0px;
  text-decoration: none;
  display: block;
  border-right: none;
  width: 100%;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
  display: block;
}
.dropdown:hover .dropbtn {
  background-color: #555555;
  color: white;
}
/* koniec socialek */
#myDIV2 {
  display: none;
  padding: 50px 20px 5px 20px;
  background-color: lightblue;
  margin-top: 50px;
}
#btnright {float: right;}
.rozwiniecie {font-size: 3em;}
/* h */
      ul {
        margin: 0;
        padding: 0;
      }

      ul li {
        cursor: pointer;
        position: relative;
        padding: 12px 8px 12px 40px;
        list-style-type: none;
        background: #eee;
        font-size: 18px;
        transition: 0.2s;

        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
      }

      ul li:nth-child(odd) {
        background: #f9f9f9;
      }

      ul li:hover {
        background: #ddd;
      }

      ul li.checked {
        background: #888;
        color: #fff;
        text-decoration: line-through;
      }

      ul li.checked::before {
        content: "";
        position: absolute;
        border-color: #fff;
        border-style: solid;
        border-width: 0 2px 2px 0;
        top: 10px;
        left: 16px;
        transform: rotate(45deg);
        height: 15px;
        width: 7px;
      }

      .close {
        position: absolute;
        right: 0;
        top: 0;
        padding: 12px 16px 12px 16px;
      }

      .close:hover {
        background-color: #f44336;
        color: white;
      }

      .header {
        background-color: green;
        padding: 30px 40px;
        color: white;
        text-align: center;
      }

      .header:after {
        content: "";
        display: table;
        clear: both;
      }

      .addBtn {
      	float: right;
        display:inline-block;
        margin: 1px;
        padding: 10px 5px;
        width: 15%;
        background: #d9d9d9;
        color: black;
        text-align: center;
        font-size: 16px;
        cursor: pointer;
        border-radius: 0;
      }

      .addBtn:hover {
        background-color: #bbb;
      }

     .histo {
margin: 5px; font-size:1.5em; font-weight:bold;}
.resetr {display: inline-block; background:red; height: 32px;
    font-size: 0.875em;color: #fff;font-weight: bold; cursor: pointer;}
.resetg {display: inline-block; background:green; height: 32px;
    font-size: 0.875em;color: #fff;font-weight: bold; cursor: pointer;}
legend {background-color: #dadada;font-weight: bold;display: block;}
input:focus::placeholder {
  color: transparent;
}
.resetkwkr {display: inline-block; background:purple; height: 32px;
    font-size: 0.875em;color: #fff;font-weight: bold; cursor: pointer;}
.resetkr {display: inline-block; background:orange; height: 32px;
    font-size: 0.875em;color: #fff;font-weight: bold; cursor: pointer;}
.oblicz {display: inline-block;background: green;height: 32px;font-size: 0.875em;color: #fff;font-weight: bold;cursor: pointer;}
.tekstowe1 { 
    display: inline-block;
    width: 100%;
    height: 250px;
    background-color: #FFF4A3;

}
.tekstowelink {color: #4383af;font-weight: bold; text-decoration: none;font-size: 18px;}
a:hover.tekstowelink {text-decoration: underline;}
footer {
  padding: 20px;
  text-align: center;
  background: #ddd;
}
footer a {text-decoration: none;}
.footerdiv {background: #ddd;display: flex;padding-bottom: 20px;}
.tekstowelinkkup {color: grey;font-weight: bold; text-decoration: none;font-size: 12px;float: left;}
a:hover.tekstowelinkkup {text-decoration: underline;}
.tekstowelinkkupdiv {clear:right;display: inline-block;margin: 0px 0px 0px 5px;float: right;width: 100%;background-color: #FFF4A3;}
.tekstowelinkkupdiv2 {clear:right;display: inline-block;margin: 0px 0px 0px 5px;float: right;width: 303px;background-color: #FFF4A3;}
.divmenu {background-color: #dadada;float: left;height: 432px;margin: 5px 5px 0px 0px;border-bottom: 1px solid black; border-left: 1px solid black;border-right: 1px solid black;}
.tekstoweflex {width: 16%;float: left;text-align: left;}
.tekstowegrid {font-size: 21px;color: #4383af;padding: 10px;margin: 15px;background-color: white;border-radius: 10px;height: 82%;display: flex;}
.divmenu a {font-size: 12px;padding-left: 6px;padding-right: 6px;color: black; text-decoration-color: black; display: block;text-underline-offset:2px;padding-bottom: 2px;}
.divmenu a:hover {background-color: #555;color: white;}
.stopka {width: 25%;float: left;text-align: left;}
.logostopka a {color: white;font-size: 37px;background: #3778C2;}
@media only screen and (max-width: 600px) {
  .topnav a {font-size: 29px;}
  .tekstowe1 {width: 100%;overflow: scroll;}
  .tekstowelink {font-size: 15px;}
  .tekstowelinkkupdiv {width: 100%;}
  .tekstoweflex {width: unset;}
  .tekstowegrid {display: inline-flex;}
  .divmenu {width: 100%; max-height: 90px;overflow: scroll;}
  h1 {font-size: 13px;}
  .english {margin-right: 0px;font-size: 13px;}
  article {padding: 0em 1em;}
  .polecane1 {padding-top: 0px !important;}
  .menuprawo a {font-size: 12px;}
  .wtyczkaimg {width: 11px; height: 11px;}
  .buttonwtyczka {font-size: 12px;}
  .dropdown2 .dropbtn2 {font-size: 12px;}
  .dropdown2 {margin-top: -3px;}
  .stopka {width: unset;float: unset;}
  .logostopka a {font-size: 29px;}
  .footerdiv {display: block;}
}
/* kalkulator */
#calc-contain{
  position: relative;
  width: 400px;
  border: 2px solid black;
  border-radius: 12px;
  padding: 20px 20px 20px 20px;
}
#calc-contain input[type=button] {
  background: lightGray;
  width: 20%;
  font-size: 20px;
  font-weight: 900;
  border-radius: 7px;
  margin-left: 13px;
  margin-top: 10px;
}
#calc-contain input[type=button]:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}
#calc-contain input[type=button]:hover {
  background-color: #00FFFF;
  color: white;
}

#calc-contain input[type = text] {
  position: relative;
  display: block;
  width: 90%;
  margin: 5px auto;
  font-size: 20px;
  padding: 10px;
}
/* koniec kalkulatora */
.polecane1 {padding-top: 20px;}
.wizualny {width: 160.67px; height: 0.45em; margin:0.15em 0em;background-color: #3778C2; float: right;}
.wizualnyile {width: 1%; max-width: 100%; height: 100%; background-color: #00FFFF;}
.przyklad {float: left; width: fit-content; margin: 0.15em 0em;color: white;background: black;font-size: 11px;}
.ranking {float: left; background: orange; color: black; width: fit-content; margin: 0.15em 0em 0.15em 2em; font-size: 11px;}
.przyciskregulacji {width: 100%;background-color: yellow;padding: 10px 0px;cursor: pointer;color: black;}
.przyciskregulacji:hover {background-color: #ffd700;}
.result-box {display: none;background-color: #dadada;padding: 10px;position: relative;margin-top: 10px;border: 1px solid #999;border-radius: 5px;}
.close-btn {position: absolute;top: 5px;right: 10px;cursor: pointer;font-weight: bold;color: #333;}
/* auto-korekta poczatek */
.autofix-status {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 203px;
  padding: 1px 14px;
  border-radius: 8px;
  color: #111;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  font-size: 14px;
  box-sizing: border-box;
  position: relative;
}
/* pulsująca kropka */
.autofix-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff, #4caf50 40%, #2e7d32 100%);
  box-shadow: 0 0 0 rgba(76,175,80,0.7);
  animation: pulse 1.8s infinite ease-in-out;
  flex: 0 0 12px;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(76,175,80,0.7); transform: scale(1); }
  50% { box-shadow: 0 0 12px 6px rgba(76,175,80,0.12); transform: scale(1.06); }
  100% { box-shadow: 0 0 0 0 rgba(76,175,80,0.0); transform: scale(1); }
}
.autofix-text {
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
  color: #0b3b17;
}
/* ikona pomocy */
.autofix-help {
  background: transparent;
  border: 1px solid rgba(0,0,0,0.08);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #0b3b17;
  font-size: 16px;
  line-height: 1;
}
/* tooltip */
.autofix-tooltip {
  position: absolute;
  right: 14px;
  top: calc(100% + 8px);
  max-width: 320px;
  background: #222;
  color: #fff;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 13px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.2);
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
  z-index: 50;
}
/* mała strzałka tooltipa */
.autofix-tooltip::before {
  content: "";
  position: absolute;
  top: -6px;
  right: 18px;
  border-width: 6px;
  border-style: solid;
  border-color: transparent transparent #222 transparent;
}
/* pokaż tooltip przy hover lub focus na przycisku pomocy */
.autofix-help:hover + .autofix-tooltip,
.autofix-help:focus + .autofix-tooltip,
.autofix-help[aria-expanded="true"] + .autofix-tooltip {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  aria-hidden: false;
}
/* wersja "off" */
.autofix-status.off .autofix-dot {
  background: radial-gradient(circle at 30% 30%, #fff, #f44336 40%, #b71c1c 100%);
  animation: none;
  box-shadow: none;
}
.autofix-status.off { background: #ffe6e6; color: #4d0000; }
/* auto-korekta koniec */
.box {
  background-color: #FFFD87;
  padding: 10px 0px;
  border: 0px solid;
  position: relative;
  border-radius: 6px;
}
.box-legend {
  position: absolute;
  top: -0.7rem;
  left: 1rem;
  background: #FFFD87;
  padding: 0 0.5rem;
  font-weight: 600;
}
  kbd { 
    min-width: 26px;
    text-align: center;
  	font-size: 29px;
    display: inline-block;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid #ccc;
    background:#f7f7f7;
    font-family: monospace;
  }
  .hint { color:black; margin-top:6px; }