html {scroll-behavior: smooth}

body {margin: 0px; padding: 0px; font-family: var(--font-name); cursor: default; color: var(--text-color); background-color: var(--background-color); background-repeat: var(--background-repeat); background-position: var(--background-position); -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; -webkit-user-drag: none; user-drag: none; -webkit-touch-callout: none}

p {margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px}

sup {margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; font-size: 9px}

ul, ol {margin: 0px 20px 0px 20px; padding: 0px; text-indent: 0px; text-align: left}
li {margin: 0px 20px 0px 20px; padding: 0px; text-indent: 0px}

ol ul li {list-style-type: lower-alpha} 

A:link, A:visited {color: #555555; text-decoration: none}
A:hover, #go:hover {color: #333333; text-decoration: none}

.wrapper-init {display: table; margin: 0px auto}
.wrapper-row {display: table-row}
.wrapper-body	{display: table-row-group}
.wrapper-cell {display: table-cell}

hr {margin: 8px 0px 8px 0px; padding: 0px; border: 0px; width: 100%; height: 1px; color: #000000; background-color: #000000}

#footer {margin-top: 40px; text-align: center}
#footer .wrapper-cell {margin-left: auto;  margin-right: auto; padding: 4px 4px 4px 4px}
#footer .wrapper-cell img {margin-right: 4px; vertical-align: middle}
#footer .wrapper-cell a {font: normal 10px Verdana, Arial, Helvetica, sans-serif; color: #666666; line-height: 12px; text-align: center}
#footer .wrapper-cell a:hover {font: normal 10px Verdana, Arial, Helvetica, sans-serif; color: #222222; line-height: 12px; text-align: center}

#menu a {margin-left: var(--odstepwmenu); margin-right: var(--odstepwmenu)}
#menutoggle {color: var(--text-color-menu)}
#wysokoscmenu {display: block; min-height: var(--wysokoscmenu)}

input[name="register"], input[name="transfersimply"] {outline: none}
form[name="register"] input[name="sprawdz"], form[name="transfer"] input[name="dalej"] {color: white; background-color: #C0C0FF; outline: none; cursor: pointer}
form[name="register"] input[name="sprawdz"]:hover, form[name="transfer"] input[name="dalej"]:hover {color: white; background-color: #A0A0FF; outline: none; cursor: pointer}

table.cennik tr {border-top: 2px solid #C0C0FF}

div.panel, div.wrapper-init {margin: 0px auto 0px auto}

img.middle {vertical-align: middle; margin-right: 4px; margin-top: -6px; cursor: pointer}

form[name="formrejestracja"] input {border-radius: 6px 6px 6px 6px}
form[name="formrejestracja"] input[type="text"] {padding-left: 4px; padding-right: 4px; border: 1px solid #C0C0FF; outline: none} 
form[name="formrejestracja"] input[type="text"]:focus {border: 1px solid #8080FF}
form[name="formrejestracja"] input[type="submit"] {color: white; padding-left: 0px; padding-right: 0px; border: 0px; background-color: #B0B0FF; outline: none}
form[name="formrejestracja"] input[type="submit"]:hover {background-color: #A0A0FF}

input[type=radio] {width: 1.0rem; height: 1.0rem; margin-right: 0.5rem; margin-bottom: 0.2rem; vertical-align: middle; accent-color: #000064}
label {cursor: pointer}

.dokoszyka {border: 1px solid black; color: black; vertical-align: middle}
.dokoszyka img {vertical-align: middle}

#koszyk img {width: 22px; height: 22px; vertical-align: middle}

#koszyk {color: black}
#koszyk {opacity: 0.6}
#koszyk:hover {opacity: 0.9}

.info {font-size: 12px}

@media screen and (min-width: 1000px) {
body {font-size: var(--font); line-height: calc(var(--font) * var(--line-height))}
#panel {width: 980px}
#panel div.wrapper-body div.wrapper-row div.wrapper-cell:nth-child(1) {width: 152px; text-align: center; vertical-align: top} 
#panel div.wrapper-body div.wrapper-row div.wrapper-cell:nth-child(1) img:nth-child(1) {margin-left: auto; margin-right: auto; margin-top: 10px; margin-bottom: -6px; display: block; width: 152px}
#panel div.wrapper-body div.wrapper-row div.wrapper-cell:nth-child(1) a {font: normal 12px Verdana, Arial, Helvetica, sans-serif; color: #1b0ee3; line-height: 12px} 
#panel div.wrapper-body div.wrapper-row div.wrapper-cell:nth-child(2) {width: 206px; text-align: left; vertical-align: top} 
#panel div.wrapper-body div.wrapper-row div.wrapper-cell:nth-child(2) img:nth-child(1) {margin-left: 44px; margin-top: 22px; display: block; opacity: 0.6}
#panel div.wrapper-body div.wrapper-row div.wrapper-cell:nth-child(3) {width: 422px} 
#panel div.wrapper-body div.wrapper-row div.wrapper-cell:nth-child(4) {width: 300px; text-align: center; vertical-align: middle} 
#panel div.wrapper-body div.wrapper-row div.wrapper-cell:nth-child(4) div {display: inline-block}
#panel div.wrapper-body div.wrapper-row div.wrapper-cell:nth-child(5) {width: 200px; text-align: center; vertical-align: middle} 
#panel div.odstep {display: inline-block; padding-left: 5px; padding-right: 5px}

#domeny {width: 960px; margin-left: 0px}
#domeny div.wrapper-body div.wrapper-row div.wrapper-cell:nth-child(1) {width: 420px; height: 40px; text-align: left; vertical-align: middle} 
#domeny div.wrapper-body div.wrapper-row div.wrapper-cell:nth-child(2) {width: 270px; height: 40px; text-align: center; vertical-align: middle} 
#domeny div.wrapper-body div.wrapper-row div.wrapper-cell:nth-child(3) {width: 270px; height: 40px; text-align: center; vertical-align: middle} 

#hosting {width: 960px; margin-left: 0px; font-size: 12px}
#hosting div.wrapper-body div.wrapper-row div.wrapper-cell {width: 120px; height: 40px; text-align: center; vertical-align: middle; border-bottom: 1px solid red} 


#theme {width: 980px; margin-left: auto; margin-right: auto; padding-left: 10px; padding-right: 10px}

#menu {margin-top: var(--odstep); text-align: center; font-family: var(--font-name-menu); font-size: var(--fontmenu)}
#menu div {display: inline-block}
#menutoggle {display: none}

h1 {margin: 20px 0px 20px 0px; padding: 0px; font-family: var(--font-name); font-size: calc(var(--font) * var(--line-height)); line-height: calc(var(--font) * var(--line-height)); color: var(--text-color)}
h2 {margin: 20px 0px 20px 0px; padding: 0px; font-family: var(--font-name); font-size: calc(var(--font) * var(--line-height)); line-height: calc(var(--font) * var(--line-height)); color: var(--text-color)}

form, input, textarea {font-size: var(--font); line-height: calc(var(--font) * var(--line-height)); margin: 0px; padding: 0px; vertical-align: middle}
input, select, option {font-size: var(--font); line-height: calc(var(--font) * var(--line-height)); height: 40px}
input[type=submit] {height: 42px; cursor: pointer}

input[name="register"], input[name="transfersimply"] {border-right: none; border-left: 1px solid #C0C0FF; border-top: 1px solid #C0C0FF; border-bottom: 1px solid #C0C0FF; border-top-left-radius: 5px; border-bottom-left-radius: 5px; display: inline-block; width: 250px; padding-left: 10px; padding-right: 10px}
form[name="register"] input[name="sprawdz"], form[name="transfer"] input[name="dalej"] {border: 1px solid #C0C0FF; border-top-right-radius: 5px; border-bottom-right-radius: 5px; display: inline-block; width: 240px}
form[name="register"] input[name="sprawdz"]:hover, form[name="transfer"] input[name="dalej"]:hover {border: 1px solid #D0D0FF; border-top-right-radius: 5px; border-bottom-right-radius: 5px; display: inline-block; width: 240px}

form[name="formrejestracja"] input[type="text"] {width: 400px} 
form[name="formrejestracja"] input[type="submit"] {width: 408px}


::placeholder {color: #C0C0C0; opacity: 1}
:-ms-input-placeholder {color: #C0C0C0}
::-ms-input-placeholder {color: #C0C0C0}

.dokoszyka {padding: 8px 40px 8px 40px; line-height: 150%; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px}

.dokoszyka {font-size: 12px}
.dokoszyka img {width: 16px; height: 16px}

.koncowka {display: inline-block; padding-top: 12px; vertical-align: top}
}

@media screen and (max-width: 1000px) {
body {font-size: var(--font-mobile); line-height: calc(var(--font-mobile) * var(--line-height-mobile))}
.wrapper-cell {display: block}
#panel {width: 100%}
#panel div.wrapper-body div.wrapper-row div.wrapper-cell:nth-child(1) {text-align: center; vertical-align: top; width: 100%} 
#panel div.wrapper-body div.wrapper-row div.wrapper-cell:nth-child(1) img:nth-child(1) {margin-left: auto; margin-right: auto; margin-top: 10px; margin-bottom: 0px; display: block; width: 50%}
#panel div.wrapper-body div.wrapper-row div.wrapper-cell:nth-child(1) a {font: normal 20px Verdana, Arial, Helvetica, sans-serif; color: #1b0ee3; line-height: 12px} 
#panel div.wrapper-body div.wrapper-row div.wrapper-cell:nth-child(2) {width: 100%} 
#panel div.wrapper-body div.wrapper-row div.wrapper-cell:nth-child(2) img:nth-child(1) {margin-left: auto; margin-right: auto; margin-top: 22px; display: block; opacity: 0.6}
#panel div.wrapper-body div.wrapper-row div.wrapper-cell:nth-child(3) {width: 100%} 
#panel div.wrapper-body div.wrapper-row div.wrapper-cell:nth-child(4) {width: 100%; text-align: center; padding: 20px 0px 4px 0px}
#panel div.wrapper-body div.wrapper-row div.wrapper-cell:nth-child(4) div {padding: 4px 0px 4px 0px}
#panel div.wrapper-body div.wrapper-row div.wrapper-cell:nth-child(5) {width: 100%; text-align: center; padding: 0px 0px 4px 0px}
#panel div.odstep {display: none}

#domeny, #hosting {width: 90%; margin-left: 0px; font-family: var(--font-name); font-size: calc(var(--font-mobile) * var(--line-height-mobile)); line-height: calc(var(--font-mobile) * var(--line-height-mobile))}
#domeny div.wrapper-body div.wrapper-row div.wrapper-cell, #hosting div.wrapper-body div.wrapper-row div.wrapper-cell {height: 30px; text-align: left; vertical-align: top}
#domeny div.wrapper-body div.wrapper-row div.wrapper-cell:nth-child(1), #hosting div.wrapper-body div.wrapper-row div.wrapper-cell:nth-child(1) {margin-top: 10px; margin-bottom: 2px; border-bottom: 2px solid gray}
#domeny div.wrapper-body div.wrapper-row div.wrapper-cell:nth-child(2), #hosting div.wrapper-body div.wrapper-row div.wrapper-cell {margin-top: 10px; margin-bottom: 20px}
#domeny div.wrapper-body div.wrapper-row div.wrapper-cell:nth-child(3) {margin-top: 10px; margin-bottom: 20px}
 
#theme {width: 90%; margin-left: 10px; margin-right: 10px}

h1 {margin: 20px 0px 20px 0px; padding: 0px; font-family: var(--font-name); font-size: calc(var(--font-mobile) * var(--line-height-mobile)); line-height: calc(var(--font-mobile) * var(--line-height-mobile)); color: var(--text-color)}
h2 {margin: 20px 0px 20px 0px; padding: 0px; font-family: var(--font-name); font-size: calc(var(--font-mobile) * var(--line-height-mobile)); line-height: calc(var(--font-mobile) * var(--line-height-mobile)); color: var(--text-color)}

form, input, textarea {font-size: var(--font-mobile); line-height: calc(var(--font-mobile) * var(--line-height-mobile)); margin: 0px; padding: 0px; vertical-align: middle}
input, select, option {font-size: var(--font-mobile); line-height: calc(var(--font-mobile) * var(--line-height-mobile)); height: 60px}
input[type=submit] {height: 62px; cursor: pointer}

input[name="register"], input[name="transfersimply"] {width: 70vw; border: 0px solid #C0C0FF; -webkit-appearance: none; -webkit-box-shadow: inset 0px 0px 0px 1px rgb(192, 192, 255); -moz-box-shadow: inset 0px 0px 0px 1px rgb(192, 192, 255); box-shadow: inset 0px 0px 0px 1px rgb(192, 192, 255); border-radius: 6px 6px 0px 0px; padding-left: 0px; padding-right: 0px; text-align: center}
form[name="register"] input[name="sprawdz"], form[name="transfer"] input[name="dalej"] {display: block; width: 70vw; border: 0px solid #C0C0FF; border-radius: 0px 0px 6px 6px; padding: 0px; cursor: pointer; text-align: center}
form[name="register"] input[name="sprawdz"]:hover, form[name="transfer"] input[name="dalej"]:hover {border: 0px solid #C0C0FF; padding: 0px; cursor: pointer; text-align: center}

table.cennik tr td {width: 100%}
#wysokoscmenu {display: none}
#menu div {display: block; padding-top: 1px; padding-bottom: 1px}

#menu {text-align: center; font-family: var(--font-menu); font-size: var(--fontmobilemenu); line-height: 30px}
#menutoggle {margin-top: calc(var(--odstep) / 2); text-align: center; font-family: var(--font-menu); font-size: var(--fontmobilemenu); line-height: 30px; cursor: pointer}

form[name="formrejestracja"] input[type="text"] {width: 100%}
form[name="formrejestracja"] input[type="submit"] {width: 100%}

.dokoszyka {padding: 16px 50px 16px 50px; line-height: 150%; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px}

.dokoszyka {font-size: 16px}
.dokoszyka img {width: 20px; height: 20px}

.koncowka {display: inline-block; padding-top: 21px; vertical-align: top}
}