:root {
	
	--black: #000;
	--white: rgb(255,255,255);
	--info-background-color: #f5f5f7;
	--content-width: 510px;
	--border-radius: 3px;
}	
	/* #16e */

	
html {
	margin:0;
	padding:0;
	border:0;
	height:100%;
	width: 100%;
	line-height: 1.5;
	font-weight: 400;
	color: #111;
}

body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	letter-spacing: 0px;
	background: var(--white);
}

b, strong {
  font-weight: 700;
}

sub, sup {
  font-size: 0.7em;
}

h1 {
  font-size: 2rem;
  margin: 0.67rem 0;
  font-weight: 600;
}

h2 {
  font-size: 1.5rem;
  font-weight: 600;
}

h3 {
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.3;
}

h4 {
  font-weight: 600;
}

h5 {
  font-size: 0.75rem;
  font-weight: 400;
  margin: 0.1rem 0;
} 

h6 {
  font-size: 0.75rem;
  font-weight: 400;
  margin: 0.1rem 0;
  line-height: 1.15;
  color: #444;
}

p {
    display: block;
    margin-block-start: 0rem;
    margin-block-end: 0rem;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
	margin-bottom: 30px;
}


table, th, td {
	border: 0px solid black;
	border-collapse: collapse;
	text-align: left; 
	font-size: 0.76rem;
	padding: 2px 2.5px;
	margin: 0 0 6px 0;
}


table { 
	page-break-inside: auto;
}


label {
	font-size: 0.95rem;
}

tr {
	page-break-inside:avoid;
	page-break-after:auto;
}
    
thead {
	display:table-header-group;
}
    
tfoot {
	display:table-footer-group;
}

textarea {
  resize: vertical;
  font: inherit;
  font-size: 0.75rem;
  height: auto;
}

textarea,
input[type=text], 
input[type=number] {
	font-family: monospace;
}

textarea,
input[type=text], 
input[type=submit], 
input[type=button],
input[type=number] {
    -webkit-appearance: none !important;
	/*
	-moz-appearance: none;
	-o-appearance: none;
	-ms-appearance: none;
	appearance: none;
	*/
	cursor: pointer;
	
}



select,
option {
	-webkit-box-shadow: none !important;
	max-width: 100% !important;
	width: 100% !important;
	box-shadow: none !important;
	background-color: var(--white) !important;
}
	
	
	
/* baner demo*/
.demo-banner {
    color: red;
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
	margin-bottom: 35px;
    /*border: 1px solid red;
    padding: 10px;
    background: #fff8f8;*/
}

.demo-banner hr {
	border: none;
	height: 1px;
	background-color: red;
}


/* menu nawigacji */


.link {
  display: inline-block;
  border: none;
  padding-bottom: 4px;
  font-weight: 700;
  color: var(--black);

}

.link:active, .link:focus, .link:hover {
  outline: 0;

}



/* animacje po najechaniu na element menu
.link:before { 
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  background: var(--black);
  width: 0;
  height: 2px;
  /* animacja podkreślenia - linia animowana od lewej
  -webkit-transition: all .4s cubic-bezier(.35, 1, .33, 1); 
  transition: all .4s cubic-bezier(.35, 1, .33, 1)

}
 */
  
.link:hover:before {
  width: 100%
}





#page {
   margin:0px;
   padding:0px;
   border:none;
   height:100%;
   width: 100%;
   position: relative;
}


/* ########### main-pic ########### */

#main-pic {
	float: left;
	width: calc(100% - var(--content-width)); /* 20px to zapas */
	height: 100%;
	font-size: 1rem;
}



.main-pic {
	margin: 16px 20px 60px 20px;
	height: calc(100% - 16px - 60px);	
	width: calc(100% - 20px - 20px);
}




#header {
	height: 60px;
}

.header-box {
	margin: 0;
	width: 100%;
	height: 100%;
	padding: 0 0;
	color: var(--black);
}

#logo {
	float: left;
	height: 36px;
	width: 150px;
	padding: 3px 0 0 0;
}

#logo a{
	display: flex;
    align-items: center;
    text-decoration: none;
    color: #222222;
    font-weight: 700;
    font-size: 1.5rem;
}


#main-svg {
	padding-top: 50px;
	width: 100%;
	max-width: 900px;
	height:calc(100% - 60px); /*60px header*/
	clear: both;
	margin: auto;
	padding: 0;
	display: flex;
	justify-content: center;
	align-items: center;
}

#form-svg-box {
	display: none;
}


.main-svg {
	width: 100%;
	height:100%;
	display: flex;
    justify-content: center;
    align-items: center;
}

#main-svg-option-box {
	clear: both;
	float: left;
	position: absolute;
	bottom: 35px;
	left: 20px;
	width: calc(100% - var(--content-width) - 20px - 25px);
}


/* ########### content = configurator ########### */

#main-content {
	float: right;
	width: var(--content-width);
	font-size: 1rem;
	height: 100%;
	overflow-y: auto;
}

.main-content {
	float: left;
	margin: 20px 10px;
	width: calc(100% - 2 * 10px); /*odjęto margines*/
}

.main-title {
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.3;
	padding-bottom: 30px;
}

.main-title sup {
	cursor: pointer;
}


.button-file {
	padding: 4px;
	font-size: 0.95rem;
	/*text-transform: uppercase;*/
	color: var(--white);
	text-align: center;
	border: 1px solid var(--black);
	background-color: var(--black);
	cursor: pointer;
	border-radius: var(--border-radius);
	-webkit-border-radius: var(--border-radius);
}

.button-file:hover {
	color: var(--black);
	background-color: var(--white);
	outline: none;
	font-weight: 600;
}

/* Container dla przycisków DXF */
.button-DXF-container {
    display: flex;
    gap: 5px;
    margin-top: -10px;
    margin-bottom: 6px;
}

.button-DXF {
	padding: 0;
	font-size: 0.85rem;
	color: var(--white);
	border: 1px solid var(--black);
	background-color: var(--black);
	cursor: pointer;
	width: 100px;
	text-align: center;
	margin: 0;
	border-radius: var(--border-radius);
	-webkit-border-radius: var(--border-radius);
}

.button-DXF:hover {
	color: var(--black);
	background-color: var(--white);
	outline: none;
	font-weight: 600;
}


.loaded-file {
	color: var(--black);
	font-size: 0.81rem;
	font-weight: 600;
	padding-top: 4px;
}
	
.form-box {
	width: 100%;
}


.form-input-box {
	width: 100%;
}

.form-info {
	margin: 15px 0 10px 0;
	background-color: var(--info-background-color);
	font-size: 0.8rem;
	padding: 13px 13px;
	color: var(--black);
	width: calc(100% - 2* 13px);
	display: none;
	font-weight: 400;
	border-radius: var(--border-radius);
	-webkit-border-radius: var(--border-radius);
}

.form-info p {
	padding: 3px 0;
	margin: 0;
	font-size: 0.85rem;
}

.form-info-table {
	width: 100%;
}

.form-info-table table,
.form-info-table th,
.form-info-table tr,
.form-info-table td {
	border: 1px solid #555;
	border-collapse: collapse;
	text-align: center; 
	font-size: 0.7rem;
	padding: 2px 2.5px;
	margin: 6px 0;
}

.form-info-table table {
	width: 100%;
}

.form-info-table th {
	font-size: 0.68rem;
	width: auto;
}

.form-demo-txt,
.form-error,
.form-error-txt {
	margin: 0;
	background-color: var(--white);
	font-size: 0.8rem;
	padding: 0 0 0 0;
	color: red;
	font-weight: 600;
}

.form-demo-txt {
	margin-top: 8px;
	font-size: 0.77em;
}

.form-demo-txt a {
    display: inline-block;
    padding: 2px 8px;
    text-decoration: none;
    border-radius: 4px;
    margin-left: 2px;
	border: 1px solid red;
}

.form-demo-txt a:hover {
    background-color: red;
    color: white !important;
}

.form-error-svg {
	color: red;
    text-align: center;
	font-weight: 600;
}
	

.form-label,
.form-label label,
.form-checkbox,
.form-checkbox-textarea,
.form-checkbox-r,
.form-checkbox label,
.form-checkbox-textarea label,
.form-checkbox-r label {
	padding: 30px 0 12px 0;
	font-size: 0.96rem;
	line-height: 1.6;
	font-weight: 600;
	width: 100%;
	cursor: pointer;
}

.form-label label,
.form-checkbox label,
.form-checkbox-textarea label,
.form-checkbox-r label {
	cursor: default;
}

.form-checkbox,
.form-checkbox-r {
	padding: 5px 0 10px 0;
}

.form-checkbox-r {
	margin-top: -16px;
}

.form-checkbox-r label,
.form-checkbox label,
.form-checkbox-textarea label {
	font-size: 0.86rem;
	padding: 0;
}

.form-checkbox-r label {
	font-weight: 400;
}


.form-checkbox-textarea {
	padding: 0;
	margin-top: -16px;
}

.form-input {
	background-color: white;
	margin-bottom: 15px;
	font-size: 0.86rem;
}

.form-input input,
.form-input textarea,
.form-input select {
	margin: 0 0 3px 0;	
	padding: 3px 5px;
	width: 100%;
	font-size: 0.85rem;
	line-height: 1.2;
	border: 1px solid var(--black);
	background-color: white;
	outline: 0px solid var(--black);
	border-radius: var(--border-radius);
	-webkit-border-radius: var(--border-radius);
	cursor: pointer;
}

#main-svg-option-box .form-input select {
	float: left;
	width: calc(100% - 220px - 25px); /* 100% - odstęp - button */
	height: 30px;
}


.form-input textarea {
	width: calc(100% - 2 * (1px + 5px));
}

.form-input input:focus, /* :focus czyli w trakcie edycji */
.form-input textarea:focus,
.form-input select:focus { 
	border-color: var(--black); /*RoyalBlue #4169e1*/
	background-color: var(--white);
	outline: 0.1px solid var(--black); 
	border-radius: var(--border-radius);
	-webkit-border-radius: var(--border-radius);
	/*
	border:  1px solid #05d; 
	jeśli kolor to za pośrednictwem border przy outline 0px */
}

.form-input input,
.form-input input[type=number] {
	width: calc(100% - 2 * (1px + 5px));
}


.form-checkbox input[type=checkbox] {
	margin: 3px 3px 0 0;
}


.form-table {
	border: 0px solid black;
    border-collapse: collapse;
    text-align: left;
	width: 100%;
}

.form-table td {
    width: 50%;
	border: 0px solid black;
    border-collapse: collapse;
    text-align: left;
    font-size: 0.8rem;
    padding: 2px 2.5px;
    margin: 6px 0;
}

.input-number {
	border: 1px solid black;
	border-radius: var(--border-radius);
	-webkit-border-radius: var(--border-radius);
}

.form-input-button-box {
	padding: 30px 0 35px 0;
	width: 100%;
}


.button-black input[type=submit],
.button-black input[type=button],
.button-white input[type=button] {
	font-weight: 500;
	/*text-transform: uppercase;*/
	border: 1px solid var(--black);
	border-radius: var(--border-radius);
	-webkit-border-radius: var(--border-radius);
	padding: 6px 0;
	font-size: 0.9rem;
	text-align: center;
	cursor: pointer;
	width: 220px;
	height: 30px;	
}

.button-black input[type=submit],
.button-black input[type=button] {
	float: right;
	background-color: var(--black);
	color: var(--white);
}

.button-black input[type=submit]:hover,
.button-black input[type=button]:hover {
	background-color: var(--white);
	color: var(--black);
	outline: 0px solid var(--black);
	font-weight: 600;
}


.button-white input[type=button] {
	float: left;
	background-color: var(--white);
	color: var(--black);
}

.button-white input[type=button]:hover {
	background-color: var(--black);
	color: var(--white);
	outline: 0px solid var(--black);
	font-weight: 600;
}


.button-example {
	font-weight: 400;
	border: 1px solid var(--black);
	border-radius: var(--border-radius);
	-webkit-border-radius: var(--border-radius);
	padding: 6px;
	font-size: 0.80rem;
	text-align: left;
	cursor: pointer;
	height: auto;	
	margin: 5px 0 15px 0;
	background-color: var(--white);
	color: var(--black);
}

.button-example b {
	font-weight: 500;
	font-size: 0.86rem;
}

.button-example:hover {
	background-color: var(--black);
	color: var(--white);
	outline: 0px solid var(--black);
}




/*
Stylizacja input pobieranie pliku
*/

.inputfile {
	width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
}

.inputfile + label {
    cursor: pointer;
    overflow: hidden;
}






/*
menu mobile
*/



.header-box {
  background-color: var(--white);
  z-index: 99;
}

.header-box ul {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  background-color: var(--white);
}

.header-box li a {
  display: block;
  padding: 10px 0;
  text-decoration: none;
  border-bottom: 1px solid #ddd;
  font-weight: 500;
}

.header-box li a:hover,
.header-box .menu-btn:hover {
  background-color: var(--white);
  font-weight: 600;
}

.header-box .logo {
  color: var(--black);
  display: block;
  float: left;
  font-size: 2rem;
  padding: 2px 0px;
  text-decoration: none;
}

.menu {
  position: absolute;
  top: 70px;
  width: calc(100% - var(--content-width) - 30px);
  max-height: 0;
  /* animacja wysuwania się meny na dół przy menu mobile
  transition: max-height .2s ease-out;
  */
}

/* menu icon */

.header-box .menu-icon {
  cursor: pointer;
  display: inline-block;
  float: right;
  padding: 20px 0;
  user-select: none;
}

.header-box .menu-icon .navicon { /* hamburger */
  background: var(--black); /* kolor środkowej */
  display: block;
  height: 2px; /* grubość kresek */
  width: 25px; /* długość kresek */
  position: relative;
  transition: background .2s ease-out; /* szybkość animacji - tutaj zmiany background */
}

.header-box .menu-icon .navicon:before,
.header-box .menu-icon .navicon:after {
  background: var(--black);
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all .2s ease-out; /* animacja zmiany burgera na X */
  width: 100%;
}

.header-box .menu-icon .navicon:before {
  top: 7px; /* odstęp pomiędzy liniami burgera */
}

.header-box .menu-icon .navicon:after {
  top: -7px; /* odstęp pomiędzy liniami burgera */
}

/* menu desktop */

.header-box .menu-btn {
  display: none;
}


.header-box .menu-btn:checked ~ .menu { /* 'Włącza' wysokość menu w mobile */
  max-height: 100%;
}

.header-box .menu-btn:checked ~ .menu-icon .navicon {
  background: transparent;
}

.header-box .menu-btn:checked ~ .menu-icon .navicon:before {
  transform: rotate(-45deg);
}

.header-box .menu-btn:checked ~ .menu-icon .navicon:after {
  transform: rotate(45deg);
}

.header-box .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.header-box .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
  top: 0;
}

/* ======================== */
/* MAIN NAVIGATION          */
/* ======================== */
.menu {
    font-size: 1.15rem;
}

ul.menu li {
	margin: 0;
	width: 100%;
}

ul.menu li a {
	padding: .75rem 0;
	display: block;
	text-decoration: none;
	color: #222222;
	font-weight: 400;
}

ul.menu li a:hover {
	font-weight: 500;
}

@media (min-width: 1600px) {
	:root {
		--content-width: 610px;
	}
	
	.button-black input[type=submit],
	.button-black input[type=button],
	.button-white input[type=button] {
		width: calc(220px + 50px);
	}
	

}

.demo-label {
	font-size: 0.75rem;
	color: red;
	font-weight: 600;
	margin-left: 0.5rem;
}




/* mobile */
@media (max-width: 999px) {

	#main-pic {
		width: 100%;
		height: auto;
	}

	.main-pic {
		margin: 10px;
		width: calc(100% - 2 * 10px);
	}

	#main-svg {
		display: none;
	}

	#form-svg-box {
		display: block;
		margin: 0;
	}

	#main-svg-option-box {
		display: none;
	}



	/* ########### content = configurator ########### */

	#main-content {
		float: left;
		width: 100%;
		height: auto;
		overflow: hidden;
	}



	.form-input-button-box {
		width: 100%;
		padding: 30px 0 35px 0;
	}

	.form-error-svg {
		padding: 40px 0 20px 0;
	}

	.button-black input[type=submit],
	.button-white input[type=button] {
		width: 48%;
	}

	#form-svg input[type=button] {
		width: 100%;
		margin: 20px 0 60px 0;
	}

	.menu {
	  width: calc(100% - 2 * 10px);
	  top: 70px;
	}
}




@ media print {
	* {
		box-shadow:none;
	}

	tr {
		page-break-inside: avoid;
	}
	h1, h2, h3, h4, h5, h6, p, p * {
		color:black;
		background:none;
		text-shadow:none;
	}
}