*, *::before, *::after {
  box-sizing: border-box;
}


a {
  color: inherit;
  text-decoration-color: inherit;
}

img, svg {
  max-width: 100%;
  height: auto;
}


input, select, textarea, button {
  font: inherit;
  color: inherit;
}


html, body {
  height: 100%;
}


body {
  margin: 0;
  font-family: "Lato", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  color: #333;
  line-height: 1.3;
  font-size: 14px;

}


.main-content { 
    max-width: 980px; 
    margin-left: auto; 
	margin-right: auto; 
    padding: 0.01em 16px;
	padding-top: 16px;
	padding-bottom: 16px;
	
}





button {
  background: none;
  border: 0;
}



h1,h2,h3,h4,h5,h6 {
    font-weight: 400;
    margin: 10px 0
}

h1 {  font-size: 36px;}
h2 {  font-size: 30px;}
h3 {  font-size: 25px;}
h4 {  font-size: 20px;}
h5 {  font-size: 18px;}
h6 {  font-size: 16px;}


.infobox {
  padding: 10px;
  margin: 20px;
  font-size: 1.2em;
  color: #000000;
  background-color: #99ff33;
  text-align:center;
  vertical-align: middle;
  border-radius: 5px;
  
}

.infobox_warning {
  padding: 10px;
  margin: 20px;
  font-size: 1.2em;
  color: #fff;
  background-color: #c52e10;
  text-align:center;
  vertical-align: middle;
  border-radius: 5px;
  
}



.status-ok    { 
  color:#4CAF50; 
  font-size: 1.2em;
  vertical-align: middle; 
}


.status-error { 
  color:#F44336;
  font-size: 1.2em;
  vertical-align: middle; 
}


input.valid  { background-color: #93dc8e !important; }
input.invalid{ background-color: #d2a4a4 !important; }


/* Chrome/Edge/Safari */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: inherit;
  transition: background-color 9999s ease-out 0s; /* opcjonalnie: gasi "żółty flash" */
}

/* gdy autofill + Twoje klasy */
input.valid:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #93dc8e inset !important;
          box-shadow: 0 0 0 1000px #93dc8e inset !important;
}

input.invalid:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #d2a4a4 inset !important;
          box-shadow: 0 0 0 1000px #d2a4a4 inset !important;
}