:root 
{
--szerokosc: 100%;
--bgcolor: white;
--fontface: 'Ubuntu', sans-serif;
--fontcolor: #404040;
--fontlight: #808080;
--fontsize: 16px;
--fontsizesmall: 13px;
--primary: #3399ff;
}

/* Scrollbars */
::-webkit-scrollbar {width: 10px;}
::-webkit-scrollbar-button {background: rgba(0,0,0,0);display: none;}
::-webkit-scrollbar-thumb {background: #AAA; border-radius: 5px;}
::-webkit-scrollbar-thumb:hover {background: #666;}
::-webkit-scrollbar-track {background: #fff;}
::-webkit-scrollbar-track-piece {background: #fff;}
::-webkit-scrollbar-corner {background: #999;}

/* Breadcrumbs */
.breadcrumbs {padding: 0; margin: 0;}
.breadcrumb {padding: 10px 0 10px 10px !important; width: 100% !important;}
.breadcrumb-item {}
.breadcrumb-item a {text-decoration: none; color: var(--primary); font-weight: bold;}
.breadcrumb-item a:hover {opacity: 0.7;}

/*Sekcja*/
.sekcja {width: 100%; background: white; border: solid 1px silver; margin-bottom: 15px; border-radius: 5px;}
.sekcja-head {background: var(--primary); color: white; padding: 10px 15px 10px 15px;font-size: 1.5em;}
.sekcja-body {background: white; padding: 15px;}

/* Sidebar Mins (toggled) */
@media only screen and (min-width: 770px) {
  .toggled {min-width:120px;}
}
@media only screen and (max-width: 769px) {
  .sidebar-toggled .sidebar {min-width: 120px;}
}

.accordion {border-radius: 5px !important;}
.accordion-header {background: var(--primary); color: white; padding: 4px 15px 4px 15px;font-size: 1.5em; stroke: 0 !important; border: 0 !important;}
.accordion-button {background: rgba(0,0,0,0) !important; color: white; stroke: 0 !important; border: 0 !important;outline: 0 !important;}
.accordion-button h5 {background: rgba(0,0,0,0) !important;color: white; stroke: 0; border: 0;}
.accordion-button span {background: rgba(0,0,0,0) !important;color: white; font-size: 1.5em; stroke: 0; border: 0;}
.accordion-button img {margin-right: 20px;}
.accordion-button:after {background: none !important; color: var(--primary) !important; padding: 5px; border-radius: 10px;stroke: 0 !important; border: 0 !important;outline: 0 !important;}
.colapsed {background: rgba(0,0,0,0) !important;  stroke: 0 !important; border: 0 !important; outline: 0 !important;}
.accordion-item h2 {border: 0 !important; stroke: 0 !important; shadow: 0 !important; outline: 0 !important;}
.accordion-item {border: 0 !important; stroke: 0 !important; shadow: 0 !important; outline: 0 !important;}
.accordion-item button {border: 0 !important; stroke: 0 !important; shadow: 0 !important; outline: 0 !important;}

/* tabela danych oczestnika */
.tabela-danych-uczestnika {width:100%;}
.tabela-danych-uczestnika tr {border-bottom: solid 1px silver; }
.tabela-danych-uczestnika tr:hover {background: white;}
.tabela-danych-uczestnika td {padding: 10px; }
.td-label {width: 50%;}
.td-dane {width: 50%;}

/*DataTables */
.dt-button {height: 30px; background: whitesmoke !important; border: solid 1px gray !important; border-radius: 4px !important; padding-top: 5px !important; font-size: 15px !important; line-height: 17px !important;}
.dt-button:hover {opacity: 0.6;}

/* DatePicker od jQuery */
#ui-datepicker-div {padding: 15px; border-radius: 8px; box-shadow: -0px 0 5px 0px grey;}
.ui-datepicker-month {margin-right: 5px !important; background: rgba(0,0,0,0); padding: 5px; border: 0; }
.ui-datepicker-year {margin-left: 5px !important;background: rgba(0,0,0,0); padding: 3px; border: 0;}
.ui-datepicker-calendar td {border: 0 !important; text-align: center !important; border-radius: 3px !important;}
.ui-state-default {border: 0 !important; text-align: center !important; border-radius: 5px !important;}
.ui-datepicker-header {background: rgba(0,0,0,0) !important; border-left: 0; border-right: 0; margin-bottom: 10px !important;}

/* Elementy Strony */
body, input, select, button, h1, h2, h3, h4, h5, p, div, span {font-family: var(--fontface);color: var(--fontcolor);}
body {background: var(--bgcolor) !important;}
.kolumna {max-width: var(--szerokosc); width: 95%; margin:auto;}
.row {max-width: var(--szerokosc) !important; margin: auto;}
.fleks {display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between;}
h1 {color: #A0A0A0;}
h3 {display: block; width: 100%; text-align: left !important;}
h5 {font-weight: normal; font-size: 19px;line-height: 22px; margin:0; color: #808080}
.card-body {background: rgba(255,255,255,0);}
.ikona_karty {height: 40px; margin-top: 7px; margin-right: 20px;}
.karta-dash {min-height: 200px;}
.karta-alert {background-image: url("../img/icons/emptyfoto.png") !important; background-repeat: no-repeat;}
.bg_logowanie {background: #3399ff !important;}
.bg_menu {background: #3399ff;}
.dyskretny-link {text-decoration: none; color: #404040; font-size: 0.8em;}
.dyskretny-link:hover {opacity: 0.9; text-decoration: none; font-size: 0.8em;}
.lb-caption {color: white !important;}
.nav-link>span>a {font-size: 12px !important;}

.nav-item span {color: white; font-size: var(--fontsize) !important;}
.nav-item i {width: 40px; height: 20px;}

/* Elementy Nagłowka */custom-file
.top-fleks {display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; margin-bottom: 20px;}
.fleksoright {text-align: right; margin-bottom: 20px;}

/* Modale */
.modal-header {background: whitesmoke; /*box-shadow: inset 0px -2px 5px 0px #AAAAAA;*/}
.modal-content {}
.modal-footer {background: whitesmoke; /*box-shadow: inset 0px 2px 5px 0px #AAAAAA;*/}

/* Formularze ogólnie */
.form-check {margin-left: 5px;}
label, .form-label { font-size: 13px; margin: 0 0 0 5px; color: #A8A8A8;}
.form-check-label {font-size: var(--fonsize); color: var(--fontcolor); margin-left: 7px;}
input[type=radio], input[type=checkbox] {transform: scale(1.5);}
.custom-file-label {color: #C0C0C0;}
.btn-ukryty {border: 0; background: rgba(255,255,255,0); outline: 0; stroke: 0;}
.form-kolumna {width: 47%;}
.btn-partial {margin-top: 10px;}
.form-group {margin-bottom: 6px !important;}
.req {border: solid 1px #A4A4A4;}
.wyzszy-txt {height: 106px !important;}
.lista_ludzi {height: 500px !important;}
.lista_ludzi option {margin-bottom: 5px;}
.label_duzy {font-size: var(--fontsize)}

.wrzutzdjecia {display: block; border: none; background: rgba(0,0,0,0);stroke: none; cursor: pointer !important;width: 90px !important;}
.wrzutzdjecia:hover {cursor: pointer !important;}
.custom-file-label {padding: 7px; text-align: left;}
.custom-file-input ~ .custom-file-label::after {
  content: "wrzut";
  padding: 7px;
}

.polezdjecia {width: 90px !important; height: 90px; margin-top: 5px; margin-bottom: 10px;}
.podglad-faktury {width: 100%; height: 300px; overflow: auto; border: solid 1px silver;}

/* Same Filtry */
.filtry {max-width: var(--szerokosc); background: #EEEEEE; margin: auto; border-radius: 4px; border: solid 1px #D3D3D3;}
.fltr-group {display: inline-block; padding: 0 0 0 10px; text-align: left;}
.form-control {width: 100%; margin-bottom: 6px !important;}
.filtry-lewe {width: 600px; max-width: 90%; display: flex; flex-direction: row;}
.filtry-prawe {width: 600px; max-width: 90%; display: flex; flex-direction: row;}

/* Tabela centrum */ 
.paginate_button {margin: 2px !important}
.pagination li {margin: 0 !important; padding: 0 !important;}
.kolumna-narzedzia {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: space-around; background: #E8E8E8; height: 100%; min-width: 100px;}
.czekbox {position: relative; top: -1px !important; margin: 0 !important;}
.btn-status {width: 80px; margin: 0 !important;}
.ico-undertable {margin-left: 10px; margin-right: 20px; height: 25px;}
input[type="number"] {text-align: right;}
.inputbrak {width: 50px;}

@media only screen and (max-width: 600px) {
}

@media only screen and (min-width: 601px) {
 .hideondesktop {display: none;}
}

/* Multikoszyk */
.th-left {text-align: left; margin-bottom: 5px;vertical-align: middle !important;}
.th-right {text-align: right; margin-bottom: 5px;vertical-align: middle !important;}
.td-left {text-align: left; padding: 5px;vertical-align: middle !important;}
.td-right {text-align: right;padding: 5px;vertical-align: middle !important;}
.namobile-only {font-size: 13px; vertical-align: middle !important;}
.wartosc {font-size: 18px; font-weight: 500;}
.produkt-nazwa {font-size: 18px; font-weight: 500;}
.wazna-kolumna {font-size: 18px; font-weight: 500;}
.akcje {background: #E8E8E8; padding: 5px; border-radius: 5px !important; margin-bottom: 2px;}
.akcjeico {width: 30px; height: 30px; padding: 5px; border-radius: 5px;}
.akcjeico:hover {background: white; opacity: 0.7;}
.align-middle {vertical-align: middle !important;}
.naglowek-koszyka {font-size: 26px; font-weight: 100;}
.hiddenradio [type=radio] {position: absolute; opacity: 0; width: 0; height: 0;  }
.hiddenradio [type=radio] + img {cursor: pointer; border-radius: 5px;}
.hiddenradio [type=radio]:checked + img {border: 1px solid #A8A8A8; background: #e0e0e0}
.malyopis {font-size: 13px;}
.wajhykoszyka {border: solid 1px silver; background: whitesmoke; border-radius: 8px; padding: 20px 20px 20px 20px;}
.pull-canvas {text-decoration: none; color: #404040; font-weight: 500;}

@media only screen and (max-width: 999px) {
 .nadesktopy-only {display: none;}
 .td-left-desk {text-align: right;padding: 5px;vertical-align: middle !important;}
}

@media only screen and (min-width: 1000px) {
  .namobile-only {display: none;}
  .td-left-desk {text-align: left;vertical-align: middle !important;}
}

/* Magazyn Zamówienia Realizacja */
.realizacja_zamowienia {width: 100%;}
.realizacja_zamowienia td {padding: 5px;}

.naglowek_zamowienia {text-decoration: none !important;}
.naglowek_zamowienia a {text-decoration: none !important;}
.naglowek_zamowienia_numer {font-weight: bold; text-decoration: none !important;}
.naglowek_zamowienia_termin {color: #808080; font-style: italic; text-decoration: none !important;}
.realizacja_zamowienia_stopka {padding-top: 10px; border: 0 !important;}

.realizacja_zamowien_produkty {width: 100%; background: rgba(0,0,0,0) !important;}
.realizacja_zamowien_produkty tr {background:  rgba(0,0,0,0) !important;}
.realizacja_zamowien_produkty td {background:  rgba(0,0,0,0) !important;}
.realizacja_zamowien_produkty .prawa {text-align: right;}

.offcanvas-header {height: 70px; width: 100%; background: var(--primary); color: white;}
.offcanvas-srodek {width: 80%; margin: auto; text-align: center; font-size: 130%;}
.zamowienie_lista_stan {color: silver; font-style: italic;}
.tab-right {text-align: right; align: right;}
#offcanvasLabel {color: white;}
.butoniera {width: 100%; text-align: center; margin-top: 20px; background: whitesmoke; border-top: solid 1px #D3D3D3; border-bottom: solid 1px #D3D3D3;}
.przeniesienie-ilosc {width: 50px; text-align: center;}

/* Stylowanie kart kontaktowych */
.karta-kontakt {margin-bottom: 15px;}

 @media only screen and (orientation: landscape) {
  .karta-kontakt label {width: 30%; position: relative; left: -5px;}
  .card-img-top {height: 35px; width: 35px;} 
 }

 @media only screen and (orientation: portrait) {
  .karta-kontakt label {width: 100%; position: relative; left: -5px;}
 }

/* Elementy dodatkowe */
.small {font-size: var(--fontsizesmall); color: #808080;}
.galeria {width: 100%; margin-top: 30px;}
.galeria-zdjecie { width: 90px; text-align: center;;}
.wizytowka {display: block; margin: 30px 0 30px 0;}

/* Kanwasy z prawej działają dzięki JSom od jQUERY w stopce canvas.php */
.bs-canvas-overlay {
    opacity: 0.85;
 z-index: 1100;
}

.bs-canvas {
 top: 0;
 overflow-x: hidden;
 overflow-y: auto;
 position: fixed;
 top: 0;
 right: 0;
 width: 500px;
 max-width: 90%;
 height: 100%;
 background: white;
 z-index: 1110;
 transition: margin .4s ease-out;
 -webkit-transition: margin .4s ease-out;
 -moz-transition: margin .4s ease-out;
 -ms-transition: margin .4s ease-out;
 right: 0;
 margin-right: -600px;
 box-shadow: -5px 0 5px -3px grey;
}

.bs-canvas-content {padding: 0;}
.bs-canvas-overlay {background: rgba(0,0,0,0.5); position: fixed; width: 100%; height: 100%;}
/* Kanwasy z prawej - KONIEC */

/* Kanwasy z prawej elementy */
.spacer {width: 100%; height: 30px;}
.canvas-naglowek-wielki {width: 100%; text-align: center; height: 30px; margin-top: 30px; font-size: 28px;}
.canvas-naglowek-sredni {width: 90%; text-align: left; height: 35px; margin: auto; font-size: 25px;margin-top: 8px;}
.canvas-butonieralewa {display: flex; width: 100%; flex-direction: row; justify-content: start; padding: 10px 20px 15px 20px; margin-top: 10px; background: whitesmoke; border-top: solid 1px #D3D3D3; border-bottom: solid 1px #D3D3D3;}
.canvas-butoniera {display: flex; width: 100%; flex-direction: row; justify-content: center; text-align: center; margin-top: 20px; background: whitesmoke; border-top: solid 1px #D3D3D3; border-bottom: solid 1px #D3D3D3;}
.canvas-butoniera .btn {margin: 10px;}
.canvas-tabela {width: 80%; margin: auto;}
.canvas-tabela td {padding: 3px; font-size: 18px;}
.canvas-kolumna {width: 80%; margin: auto; font-size: 18px;}
.bs-canvas-header {position: -webkit-sticky;  position: sticky; top: 0; z-index: 1200;}
.accordion-button {padding: 11px !important;}
/* Kanwasy z prawej elementy - KONIEC */

/* Elementy poligonowe - do usunięcia na końcu developerki */
.prawa: {position: relative; right: 2px;}
.card {margin-top: 15px;}
.tab-pane {padding: 15px; font-family: var(--fontface);}
#transp {
    position:absolute;
    right:0;
    top:0;
    background: rgba(255,255,255,.9);
    width:40%;
    height:100vh;
    padding: 15px;
}


/* Edycja Stron */
.strony-link {text-transform: uppercase; font-weight: 500;}
.wiszacy {display: inline-block; width: 100px; height: 100px; position: fixed; right: 0px; top: 100px; z-index: 101; opacity: 0.6;}

/* Styl do ukrywania diva w zależności od wyboru w select oparty na jQuery (przykład w canvas zamawianie produktu)*/
.hidebox{
  display: none;
}

.miniaturka {width: 100%; max-width: 240px; height: auto;}