body { background: #fff; font-size: 12px; }

button { transition: 0.3s; }
button:hover { background: #E53935; }
button.active { background: #B71C1C !important; }

header { background: #546E7A; }

h1.pageTitle { margin: 0px; padding: 25px 40px 20px 40px; font-weight: normal; font-size: 1.8em; border-bottom: 1px solid #eee; }
h1.pageTitle div { font-size: 0.6em; color: #888; }
h2.pageTitle { margin: 0px 0px 10px 0px; padding: 0px 0px 10px 10px; font-weight: bold; font-size: 1.4em; border-bottom: 1px solid #eee; color: #E53935; line-height: 24px; }
h3.pageTitle { margin: 0px 0px 10px 0px; padding: 0px; font-weight: bold; font-size: 1.2em; color: #E53935; line-height: 18px; }
h2.pageTitle > button.mdl-button { height: 30px; line-height: 30px; margin: 0px !important; position: relative; bottom: 3px; }

.page-content {  }

.box-title { color: #E53935; }
#tmpl main { background: #fff !important; }

.cena-box { text-align: right; }
.cena-box .oferta { font-size: 2em; line-height: 1em; margin-bottom: 3px; font-weight: bold; }
.cena-box .brutto { font-size: 2em; line-height: 1em; margin-bottom: 3px; font-weight: bold; }
.cena-box .oferta + .brutto { font-size: 1.2em; }
.cena-box .netto { color: #aaa; font-size: 1.2em; line-height: 1em;  }
.cena-box .prowizja { color: #E53935; margin-top: 3px; }
.cena-box .oferta + .brutto { display: none; }
.cena-box .oferta + .brutto + .netto { display: none; }

#oferta-podsumowanie { background: #fff; width: 100%; box-sizing: border-box; box-shadow: 0px 0px 10px -5px #222; position: relative; z-index: 10; }
#oferta-podsumowanie > div { display: flex; }
#oferta-podsumowanie > div > div { flex: 1; }
#oferta-podsumowanie > div.zestawienie { display: block; position: fixed; top: 100%; }
#oferta-podsumowanie .padding { padding: 20px 30px; }
#oferta-podsumowanie .box + .box { border-left: 1px solid #eee; }
#oferta-podsumowanie .tool button { font-size: 12px; padding: 0px 8px; line-height: 26px; height: 26px; }
#oferta-podsumowanie .tool button + button { margin-top: 5px; }

#cena-box button { position: relative; top: -10px; right: -20px; }

#klient-box {}
#klient-box button { position: relative; top: -10px; right: -20px; }
#klient-box button i { font-size: 20px !important; }
#klient-box i { font-size: 11px; margin-right: 4px; vertical-align: middle; margin-bottom: 3px; }
#klient-box .klient-dane { padding: 15px; }
#klient-box .klient-dane button { background: #444 !important; color: #fff;  box-shadow: inset 0px -30px 30px -30px #000; margin-top: -4px; line-height: 30px; height: 30px; font-size: 12px; }
#klient-box .klient-dane i { font-size: 12px; margin: -2px 4px -2px 10px; position: relative; bottom: -1px; color: #555; }
#klient-box .klient-dane strong + strong { margin-left: 8px; }
#klient-box div { padding: 2px 0px; }

#lokalizacja-box {}
#lokalizacja-box button { position: relative; top: -10px; right: -20px; }
#lokalizacja-box button i { font-size: 20px !important; }
#lokalizacja-box i { font-size: 11px; margin-right: 4px; vertical-align: middle; margin-bottom: 3px; }
#lokalizacja-box .klient-dane { padding: 15px; }
#lokalizacja-box .klient-dane button { background: #444 !important; color: #fff;  box-shadow: inset 0px -30px 30px -30px #000; margin-top: -4px; line-height: 30px; height: 30px; font-size: 12px; }
#lokalizacja-box .klient-dane i { font-size: 12px; margin: -2px 4px -2px 10px; position: relative; bottom: -1px; color: #555; }
#lokalizacja-box .klient-dane strong + strong { margin-left: 8px; }
#lokalizacja-box div { padding: 2px 0px; }

#producent-box {}
#producent-box button { position: relative; top: -10px; right: -20px; }
#producent-box button i { font-size: 20px !important; }
#producent-box i { font-size: 11px; margin-right: 4px; vertical-align: middle; margin-bottom: 3px; }
#producent-box img { max-height: 40px; }
#producent-box .nazwa { font-weight: bold; font-size: 1.1em; }

#producent-lista { }
#producent-lista ul { margin: 0px -10px; padding: 0px; list-style-type: none; }
#producent-lista li { display: inline-block; width: 220px; box-sizing: border-box; vertical-align: middle; text-align: center; }
#producent-lista li > div { position: relative; padding: 20px 10px 10px 10px; }
#producent-lista li.active > div { border: 3px solid #000; }
#producent-lista .logo { height: 60px; }
#producent-lista .logo img { max-width: 80%; max-height: 90%; }
#producent-lista .nazwa { font-weight: bold; font-size: 1.1em; }
#producent-lista button { position: absolute; padding: 0px; margin: 0px; top: 0px; left: 0px; width: 100%; height: 100%; border: none; cursor: pointer; background: transparent; }
#ogrodzenie-producent.jq-box .jq-box-content { max-width: 100%; display: inline-block; }

#kolor-box {}
#kolor-box button { position: relative; top: -10px; right: -20px; }
#kolor-box button i { font-size: 20px !important; }
#kolor-box i { font-size: 11px; margin-right: 4px; vertical-align: middle; margin-bottom: 3px; }
#kolor-box .kolor-box { position: relative; height: 58px; width: 100%; }
#kolor-box .bg { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; }
#kolor-box .ral { position: absolute; top: 0px; left: 0px; background: #fff; color: #000; padding: 0px 5px; height: 18px; line-height: 18px; }
#kolor-box .nazwa { position: absolute; bottom: 0px; right: 0px; background: #000; color: #fff; padding: 0px 5px; height: 18px; line-height: 18px; }
#kolor-box .doplata { position: absolute; top: 18px; left: 0px; background: red; color: #fff; padding: 0px 5px; height: 18px; line-height: 18px;  font-size: 13px; }

#kolor-lista {  }
#kolor-lista ul { margin: 0px; padding: 10px 0px 0px 0px; list-style-type: none; }
#kolor-lista li { display: inline-block; width: 180px; height: 80px; position: relative; vertical-align: top; overflow: hidden; font-size: 11px; line-height: 11px; border: 1px solid #fff; box-sizing: border-box; }
#kolor-lista .bg { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; }
#kolor-lista .ral { position: absolute; top: 0px; left: 0px; background: #fff; color: #000; padding: 0px 5px; height: 18px; line-height: 18px; }
#kolor-lista .nazwa { position: absolute; bottom: 0px; right: 0px; background: #000; color: #fff; padding: 0px 5px; height: 18px; line-height: 18px; }
#kolor-lista .doplata { position: absolute; top: 18px; left: 0px; background: red; color: #fff; padding: 0px 5px; height: 18px; line-height: 18px;  font-size: 13px; }
#kolor-lista button { position: absolute; top: 0px; left: 0px; margin: 0px; padding: 0px; width: 100%; height: 100%; border: none; cursor: pointer; background: transparent; }
#ogrodzenie-kolor.jq-box .jq-box-content { max-width: 100%; display: inline-block; }

#kolor-typ { border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; margin-bottom: 15px; }
#kolor-typ ul { display: flex; margin: 0px; padding: 0px; list-style-type: none; }
#kolor-typ li { flex: initial; }
#kolor-typ button { border: none; margin: 0px; padding: 0px 15px; height: 40px; line-height: 40px; border-radius: 0px; display: block; width: 100%; background: transparent; font-size: 1em; cursor: pointer; white-space: nowrap; }
#kolor-typ button:hover { background: #ddd; }
#kolor-typ button.active { background: #000; color: #fff; }

#oferta-typ-box { display: flex; }
#oferta-typ-box > div { flex: 1 }
#oferta-typ-box > div + div { border-left: 1px solid #fff; }
#oferta-typ-box > div button { display: block; padding: 10px; width: 100%; box-sizing: border-box; border: none; font-size: 1em; background: #000; color: #fff; cursor: pointer; }
#oferta-typ-box > div button.on { background: #fff; color: #000; }

#ogrodzenie-element-box { display: flex; border-top: 1px solid #fff; }
#ogrodzenie-element-box div { flex-grow: 1; }
#ogrodzenie-element-box div + div { border-left: 1px solid #fff; }
#ogrodzenie-element-box div button { display: block; padding: 7px 10px; width: 100%; box-sizing: border-box; border: none; font-size: 0.9em; background: #000; color: #fff; cursor: pointer; border-radius: 0px; }
#ogrodzenie-element-box div button.on { background: #fff; color: #000; }
#ogrodzenie-element-box div.typ { flex: initial; }
#ogrodzenie-element-box div.typ button { background: #E53935; }

#oferta-zestawienie { top: 0%; left: 0px; width: 100%; min-height: 100%; padding: 30px; }
#oferta-zestawienie h2 { font-size: 1.4em; font-weight: bold; margin: 0px; padding: 12px 0px 0px 0px; color: #E53935; line-height: 1em; }
#oferta-zestawienie h2 i { font-size: 18px !important; margin: 0px 0px 0px 2px; vertical-align: middle; }
#oferta-zestawienie h3 { font-size: 1.3em; margin: 0px; padding: 0px; }
#oferta-zestawienie .buttony { margin: 5px 0px -5px 0px; }

#oferta-zestawienie table { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 12px; }
#oferta-zestawienie td { padding: 8px 6px; white-space: nowrap; vertical-align: top; }
#oferta-zestawienie td.lp { text-align: right; width: 1px; }
#oferta-zestawienie td.nazwa { white-space: normal !important; width: 100%; }
#oferta-zestawienie td.cena { text-align: right; }
#oferta-zestawienie td.rabat { text-align: right; }
#oferta-zestawienie td.jm { text-align: right; }
#oferta-zestawienie td.ilosc { text-align: center; }
#oferta-zestawienie thead td { border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; background: #eee; font-weight: bold; }
#oferta-zestawienie tfoot { text-align: right; }
#oferta-zestawienie tbody button.icon { margin: -8px 0px; border-radius: 0px; flex: 1; width: 24px; height: 24px; line-height: 24px; }
#oferta-zestawienie tbody td { border-bottom: 1px solid #eee; }
#oferta-zestawienie tbody .color { display: inline-block; width: 22px; height: 22px; border-radius: 20px;}
#oferta-zestawienie tbody input { width: 100%; text-align: inherit; border: none; margin: -8px -6px; padding: 8px 6px; min-width: 50px; font-size: inherit; }
#oferta-zestawienie td.cena input { min-width: 80px; width: 100% !important; }
#oferta-zestawienie td.ilosc input { width: 65px; text-align: right; }
#oferta-zestawienie td.vat { min-width: auto; text-align: right; }
#oferta-zestawienie .kolor { width: 20px; height: 20px; border-radius: 100px; display: inline-block; margin: 0px; overflow: hidden; vertical-align: middle; margin: 0px 0px 0px 5px; }
#oferta-zestawienie .cena-brutto { font-weight: bold; font-size: 1.4em; padding-top: 12px; }
#oferta-zestawienie .cena-netto { color: #aaa; font-size: 1.2em; }
#oferta-zestawienie .cena-prowizja { color: #E53935; font-size: 0.8em; }
#oferta-zestawienie ul.checklista { margin: 0px; padding: 0px; list-style-type: none; position: relative; }
#oferta-zestawienie ul.checklista li { padding: 2px 0px; display: flex; }
#oferta-zestawienie ul.checklista li:first-child { padding-top: 8px; }
#oferta-zestawienie ul.checklista li div {  }
#oferta-zestawienie ul.checklista li div:first-child { font-weight: bold; white-space: nowrap; padding-right: 10px; }
#oferta-zestawienie ul.checklista input { padding: 0px !important; margin: 0px !important; font-size: 11px; font-size: inherit; border: none; }
#oferta-zestawienie ul.checklista select { padding: 0px 22px 0px 0px !important; margin: 0px !important; font-size: inherit; border: none; }
#oferta-zestawienie ul.checklista button { border-radius: 100px; margin: 0px; }
#oferta-zestawienie ul.checklista > button[name="checklista-dodaj"] { position: absolute; top: -18px; left: -30px; }

#oferta-suma { text-align: right; padding: 20px 6px; }
#oferta-suma .cena-brutto { font-size: 2em; margin: 0px; padding: 0px; font-weight: bold; }
#oferta-suma .cena-netto { font-size: 1.2em; margin: 0px; padding: 4px 0px 0px 0px; color: #ccc; }

#box-podsumowanie { text-align: right; padding: 30px 0px 0px 0px; display: flex; }
#box-podsumowanie .cena-brutto { font-size: 2em; margin-bottom: 4px; font-weight: bold; }
#box-podsumowanie .cena-netto { color: #aaa; font-size: 1.2em; }
#box-podsumowanie > * { flex: 1; }
#box-podsumowanie button { flex: initial; width: auto; margin-left: 15px; padding-left: 20px; padding-right: 20px; }
#box-podsumowanie form + form { margin-top: 12px; }

#ogrodzenie-konfigurator {  }
#ogrodzenie-konfigurator.page-content { padding: 0px; }
#ogrodzenie-konfigurator form > .box { padding: 15px 20px 10px 20px; margin: 0px -20px; border-top: 1px solid #ddd; font-weight: bold; }
#ogrodzenie-konfigurator form input, #ogrodzenie-konfigurator form select { margin-top: 0px; margin-bottom: 0px; padding: 8px 8px 8px 0px !important; border: none; cursor: pointer; }
#ogrodzenie-konfigurator .komunikat-box.informacja { margin: 0px -20px; padding: 0px 20px !important; margin-top: -12px; }
#ogrodzenie-konfigurator .box-title {  }
#ogrodzenie-konfigurator .box-title .icon { margin-top: -2px; }
#ogrodzenie-konfigurator .box .flex { wrap: ltr; }
#ogrodzenie-konfigurator .box .flex > * { max-width: 160px; }
#ogrodzenie-konfigurator .box .flex > .empty { max-width: none; }
#ogrodzenie-konfigurator .flex > .cena-box { white-space: nowrap; width: 145px !important; max-width: 145px !important; text-align: right; border-left: 1px solid #ddd; }
#ogrodzenie-konfigurator .box .flex > .cena-box > .brutto { font-size: 1.2em; margin: 0px; padding: 0px; font-weight: bold; }
#ogrodzenie-konfigurator .box .flex > .cena-box > .netto { font-size: 1em; margin: 0px; padding: 2px 0px 0px 0px; font-weight: normal;  }
#ogrodzenie-konfigurator .box-title { flex: initial; max-width: 160px !important; width: 160px !important; }
#ogrodzenie-konfigurator .box-title div { color: #000; font-size: 0.6em; font-weight: normal; }
#ogrodzenie-konfigurator .red { white-space: normal; text-align: center; font-size: 10px; line-height: 12px; }
#ogrodzenie-konfigurator .box-top { margin-bottom: 20px; align-items: center; }
#ogrodzenie-konfigurator .box-bottom { padding-top: 20px; margin: 0px -20px 0px -20px; border-top: 1px solid #ddd; }
#ogrodzenie-konfigurator .box-top .cena-box { width: 230px !important; max-width: 230px !important; padding-right: 30px; }
#ogrodzenie-konfigurator .box-top .brutto { font-weight: bold; font-size: 2em; margin-bottom: 4px; }
#ogrodzenie-konfigurator .box-top .netto { font-size: 1.2em; color: #aaa; }
#ogrodzenie-konfigurator .box-top .buttons { padding-right: 20px; }
#ogrodzenie-konfigurator .box-top h1 { margin: 0px; padding: 0px; }
#ogrodzenie-konfigurator .box-top h1 div { font-size: 0.4em; letter-spacing: 5px; font-weight: normal; text-transform: uppercase; color: #aaa; }
#ogrodzenie-konfigurator table.akcesoria { width: 100%; border-collapse: collapse; }
#ogrodzenie-konfigurator table.akcesoria td.nazwa { padding-left: 0px; text-align: left; font-weight: bold;  }
#ogrodzenie-konfigurator table.akcesoria td.ilosc {  }
#ogrodzenie-konfigurator table.akcesoria td.cena { width: 230px !important; max-width: 230px !important; border-left: 1px solid #ddd; }
#ogrodzenie-konfigurator table.akcesoria td.cena.cena-brutto { font-weight: bold; }
#ogrodzenie-konfigurator table.akcesoria td.cena.cena-netto { color: #aaa; }
#ogrodzenie-konfigurator table.akcesoria td { text-align: right; font-weight: normal; padding-left: 0px; }
.jq-box#element-typ-ogrodzenie > div > table > tbody > tr > td { padding: 10px; }
.jq-box#element-typ-ogrodzenie .jq-box-content { width: 100%; }

#ogrodzenie-konfigurator + #oferta-zestawienie { border-top: 1px solid #ddd; box-shadow: 0px 0px 15px #aaa; }

.page-content.administrator > form > div > select { border: 1px solid #ddd; background: #eee; }
.page-content.administrator h3 { font-size: 1.4em; font-weight: bold; margin: 0px; padding: 10px 0px; color: #E53935; }
.page-content.administrator h4 { font-size: 1.2em; font-weight: bold; margin: 0px; padding: 6px 0px; }
.page-content.administrator table { width: 100%; border-collapse: collapse; }
.page-content.administrator table td, #cennik table th { border: 1px solid #ddd; text-align: center; }
.page-content.administrator table th { border: 1px solid #ddd; background: #eee; padding: 8px; white-space: nowrap; }
.page-content.administrator table td input { margin: 0px; padding: 0px; text-align: center; border: none; font-size: inherit; font-weight: bold; line-height: 1em; }
.page-content.administrator #kolory { margin: 0px; padding: 0px; list-style-type: none; line-height: 1em; }
.page-content.administrator #kolory li { display: inline-block; font-size: 11px; border-radius: 3px; margin: 1px; }
.page-content.administrator #kolory li > div { padding: 5px; }
.page-content.administrator td ul.kolor { font-size: 11px; margin: 0px; padding: 0px; line-height: 1em; list-style-type: none; vertical-align: middle; }
.page-content.administrator td ul.kolor li { white-space: nowrap; display: inline-block; margin: 1px; background: #eee; padding: 3px; border: 1px solid #ddd; vertical-align: middle; line-height: 1em; }
.page-content.administrator td ul.kolor li input[type="checkbox"]{ margin-right: 3px; }
input:checked { background: #fff url(../../../css/images/checkbox-checked.png) no-repeat center center !important; background-size: 90% !important; }
.page-content.administrator h3 + .komunikat-box { margin-top: 0px; }
.checklist-form { padding: 15px; background: #eee; }
.page-content.administrator table.checklista { text-align: left; padding-left: 8px; }

.elementLista { margin-top: 10px; }
.elementLista > div { max-height: 250px; overflow: scroll; overflow-x: hidden; overflow-y: auto; }
.elementLista form { width: 100% }
.elementLista table { width: 100%; border-collapse: collapse; }
.elementLista td { vertical-align: middle; border-bottom: 1px solid #eee; padding: 3px 8px; }
.elementLista th { vertical-align: middle; border-bottom: 1px solid #ddd; padding: 5px 8px; border-top: 1px solid #ddd;background: #eee; }
.elementLista .nazwa { line-height: 1.1em; width: auto; }
.elementLista .ilosc { max-width: 60px; min-width: 60px; width: 60px; }
.elementLista .ilosc input { text-align: right; width: 60px; }
.elementLista .jm { max-width: 30px; min-width: 30px; width: 30px; text-align: center; }
.elementLista .cena { max-width: 80px; min-width: 80px; width: 80px; text-align: right; }
.elementLista .button { text-align: right; min-width: 70px; max-width: 70px; width: 70px; }
.elementLista .cena-brutto { font-size: 1.2em; font-weight: bold; line-height: 1em; padding-bottom: 2px; }
.elementLista .cena-netto { font-size: 0.9em; color: #aaa; line-height: 1em; }
#elementSzukaj { margin: 0px; }
#element-typ-usluga .jq-box-content { width: 640px; }

#oferty.page-list { }
#oferty.page-list .cena { text-align: right; }
#oferty.page-list .cena .oferta { font-weight: bold; font-size: 1.25em; }
#oferty.page-list .cena .brutto { font-weight: bold; font-size: 1.25em; }
#oferty.page-list .cena .oferta + .brutto { font-weight: bold; font-size: 11px; }
#oferty.page-list .cena .netto { color: #aaa; font-size: 11px; }
#oferty.page-list .prowizja { color: #E53935; margin-top: 2px; font-size: 9px; }
#oferty.page-list .cena .oferta + .brutto { display: none; }
#oferty.page-list .cena .oferta + .brutto + .netto { display: none; }

/*ZAMOWIENIE*/
#zamowienie .pozycje { width: 100%; }
#zamowienie .pozycje th { background: #ddd; font-weight: bold; }
#zamowienie .pozycje tbody td { border-bottom: 1px solid #ddd; background: #fff; vertical-align: top; }
#zamowienie .pozycje tfoot td { padding-top: 14px; }
#zamowienie .brutto { font-size: 1.8em;}
#zamowienie .zestawienie-cena { text-align: center; }
#zamowienie .zestawienie-cena > * { text-align: center; font-size: 1.8em !important; margin: 0px; padding: 15px; font-weight: bold; }

/*CHECKLISTA*/
#checklista.page-form .checklista > table { font-size: 11px; }
#checklista.page-form .checklista > table select { font-size: 11px }
#checklista.page-form .checklista > table td { padding: 0px; }
#checklista.page-form .checklista > table tr td:first-child { font-weight: bold; font-size: 12px; }
#checklista.page-form .box-title { padding: 0px; margin: 0px; }
#checklista.page-form .checklista > table tbody tr:first-child td { padding-top: 12px; }
#checklista.page-form td select, #checklista.page-form td input { margin: 0px; }
ul.checklista { margin: 5px 0px 0px 0px; padding: 0px 0px 0px 16px; }

/*WZORY LIST*/
#ogrodzenie-konfigurator .filtr button { margin: 2px; }
#ogrodzenie-konfigurator .filtr button.on { background: #558B2F; }
.wzory-list {}
.wzory-list ul { margin: 0px; padding: 0px; list-style-type: none; width: 100%; align-items: stretch !important }
.wzory-list ul li { vertical-align: top; width: 33.33%; display: inline-block; text-align: left; box-sizing: border-box; height: 180px; padding: 2px; }
.wzory-list ul li button { background: #fff; color: #000; width: 100%; box-sizing: border-box; padding: 15px; transition: 0.3s; text-align: left; height: 100%; height: 176px; border: 1px solid #eee; border-radius: 3px;  }
.wzory-list ul li button:hover { border-color: #bbb; }
.wzory-list ul li button .nazwa { font-size: 1.5em; font-weight: bold; line-height: 1.3em; }
.wzory-list ul li button .producent { font-size: 0.9em; color: #888; }
.wzory-list ul li button .opcje { padding-top: 8px; font-size: 0.9em; }
.wzory-list ul li button .opcje div { display: inline-block; padding: 4px; background: #eee; color: #aaa; margin-right: 3px; border-radius: 2px; }
.wzory-list ul li button .opcje div.on { color: #DCEDC8; background: #558B2F }
.wzory-list ul li img { max-width: 75%; max-height: 130px;  }