@import "styl-okno.css";

html {
	--kolor-podstawowy: rgb(144, 144, 144);
	--kolor-podstawowy-przyciemniony: rgb(128, 128, 128);
	--kolor-podstawowy-ciemny: rgb(53, 53, 53);
	--kolor-tla: rgb(236, 236, 236);
	--kolor-tla-input: var(--kolor-tla);
	--wysokosc-gornego-paska: 50px;
	--kolor-wylaczony: rgb(222, 222, 222);
}

@-webkit-keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

.tloZakladek {
	/*! background: #DDD; */
	padding-top: 3px;
	padding-left: 5px;
}

.css-styl-test {
	background: #D0D;
}

.css-styl-tab {
	background: #DDD;
}

.css-przycisk-zakladki {
	color: #848484;
	white-space: nowrap;
	padding: 3px 10px 5px 10px;
	font-size: 12px;
}

.css-przycisk-zakladki-wybrany {
	background: #FFF;
	/*! padding-left: 10px; */
	text-align: right;
	white-space: nowrap;
	padding: 3px 10px 5px 10px;
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
	font-size: 12px;
	font-weight: bold;
	color: black;
}

.css-text-coma {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}

/* styl nakladany obszarowi roboczemu tabeli, 
jezeli chcemy zeby jej komorki mialy 100% wysokosci */
.styl-kontener-tabeli--komorki-h100 {
	
}

.styl-kontener-tabeli--komorki-h100>div>div>div>table>tbody>tr>td>table
	{
	height: 100%;
}

.styl-kontener-tabeli--komorki-h100>div>div>div>table>tbody>tr>td>table>tbody
	{
	height: 100%;
}

.styl-kontener-tabeli--komorki-h100>div>div>div>table>tbody>tr>td>table>tbody>tr
	{
	height: 100%;
}

.styl-kontener-tabeli--komorki-h100>div>div>div>table>tbody>tr>td>table>tbody>tr>td
	{
	height: 100%;
}

.przycisk-menu-klient {
	transition: background 1s ease, color 1s ease;
	background: linear-gradient(to right, transparent 50%, white 50%) left
		bottom/200% 100%, var(--kolor-podstawowy) !important;
	border: 4px solid var(--kolor-podstawowy);
	border-top: none;
	border-bottom: none;
	border-right: none;
	color: white;
	padding: 10px 5px 10px 5px !important;
}

.przycisk-menu-klient:hover {
	transition: background 1s ease, color 1s ease;
	background: linear-gradient(to right, transparent 50%, white 50%) right
		bottom/200% 100%, var(--kolor-podstawowy) !important;
	color: black;
}

.ekran-glowny {
	width: 100%;
	height: 100%;
}

.opakowanie-menu {
	height: 100vh;
	overflow-x: hidden;
}

.opakowanie-menu>div:first-child {
	height: 100%;
}

.obszar-roboczy {
	height: 100%;
}

.obszar-roboczy table:first-child>colgroup>col {
	width: auto !important;
}

.obszar-roboczy>div:last-child {
	height: calc(100vh - var(--wysokosc-gornego-paska));
	overflow-y: auto;
}

.obszar-roboczy-naglowek {
	width: 100%;
	height: var(--wysokosc-gornego-paska);
	display: flex;
	align-items: center;
	box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.3);
	position: relative;
	z-index: 1;
}

.opakowanie-logo {
	width: 100%;
	height: var(--wysokosc-gornego-paska);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.3);
	margin-bottom: 15px;
	background-color: white;
	position: relative;
	z-index: 2;
}

.komponent-formatki select:first-child {
	height: 30px;
	border-radius: 6px;
	border: none;
	background-color: var(--kolor-tla-input) !important;
	outline: none;
}

.komponent-formatki {
	max-width: 430px;
	/* max-width: 100%; */
}

.komponent-formatki select:first-child[disabled]  {
	background-color: var(--kolor-wylaczony) !important;
}

.komponent-formatki input:first-child {
	height: 30px;
	border-radius: 6px;
	border-image: none;
	border-style: solid;
	padding: 0px;
	padding-left: 5px;
	border: none;
	background-color: var(--kolor-tla-input) !important;
	outline: none;
}

.komponent-formatki input:first-child[disabled]  {
	background-color: var(--kolor-wylaczony) !important;
}

.obszar-roboczy-naglowek>span {
	border-left: 4px solid var(--kolor-podstawowy);
	padding-left: 10px;
	padding-top: 6px;
	padding-bottom: 6px;
	font-size: 15px;
}

.menu {
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	background-color: var(--kolor-tla);
}

.menu-aktywny {
	transition: none;
	background: white !important;
	color: black;
}

.menu-aktywny:hover {
	transition: none;
	background: white !important;
	color: black;
}

.logowanie {
	min-height: 100vh;
	background-color: var(--kolor-tla);
	height: 100vh;
}

.logowanie>div {
	padding: 0px;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.tlo-logowanie {
	width: 100%;
	height: 90%;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: rgba(0, 0, 0, 0);
	background-repeat: no-repeat;
	background-image: var(--url-tlo-logowanie);
	background-size: cover;
	background-position: center center;
}

.formatka-logowania {
	padding: 20px !important;
	background-color: white;
	display: flex;
	flex-direction: column;
	border-radius: 6px;
	box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.3);
}

.text-field-logowanie {
	width: 100%;
	padding: 5px;
	position: relative;
}

.text-field-logowanie input {
	border-radius: 6px;
	padding: 0px;
	background-color: var(--kolor-tla-input);
	border-image: none;
	border-width: 1px;
	height: 45px;
	width: 100%;
	border-style: solid;
	border: none;
	padding-left: 50px;
	font-size: 20px;
	box-sizing: border-box;
	outline: none;
}

.text-field-logowanie::before {
	content: '';
	position: absolute;
	width: 25px;
	top: 10px;
	left: 15px;
	height: 25px;
}

.text-field-login::before {
	background:
		url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" focusable="false" height="25" width="25"><g fill="rgb(144, 144, 144)"><path d="M8 0c-5.6 0-2.9 7.3-2.9 7.3 0.6 1 1.4 0.8 1.4 1.5 0 0.6-0.7 0.8-1.4 0.9-1.1 0-2.1-0.2-3.1 1.6-0.6 1.1-0.9 4.7-0.9 4.7h13.7c0 0-0.3-3.6-0.8-4.7-1-1.9-2-1.6-3.1-1.7-0.7-0.1-1.4-0.3-1.4-0.9s0.8-0.4 1.4-1.5c0 0.1 2.7-7.2-2.9-7.2z"></path></g></svg>');
}

.text-field-haslo::before {
	background:
		url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" focusable="false" height="25" width="25"><g fill="rgb(144, 144, 144)"><path d="M8.1 7c-0.2-0.1-0.4-0.2-0.6-0.3l7.5-6.7h-2l-7 6.1c-0.3-0.1-0.6-0.1-1-0.1-2.8 0-5 2.2-5 5s2.3 5 5 5 5-2.2 5-5c0-0.6-0.1-1.2-0.3-1.7l1.3-1.3v-2h2v-2h2l1-1v-3l-7.9 7zM4 13.2c-0.7 0-1.2-0.6-1.2-1.2s0.6-1.2 1.2-1.2 1.2 0.6 1.2 1.2-0.5 1.2-1.2 1.2z"></path></g></svg>');
}

.button-logowanie {
	height: 45px;
	background-color: var(--kolor-podstawowy);
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	color: white;
	transition: background-color 0.5s;
}

.button-logowanie:hover {
	background-color: var(--kolor-podstawowy-przyciemniony);
}

.button-logowanie:active {
	background-color: var(--kolor-podstawowy-ciemny);
}

.text-align-center {
	text-align: center;
}

.logo-logowanie {
	max-width: 400px;
	max-height: 100px;
}

.logo-logowanie img {
	width: 100%;
	height: 100%;
}

.tytul-formatki {
	padding: 5px;
	box-sizing: border-box;
	display: inline-flex;
	border-bottom: 2px solid var(--kolor-podstawowy);
	font-weight: bold;
	width: 100%;
	margin-bottom: 10px;
}

.zawijanie-kolumn>div {
	display: inline-block;
	vertical-align: top;
}

.loader {
	box-sizing: border-box;
	position: relative;
	margin: 75px auto;
	width: 150px;
	height: 150px;
	display: block;
	overflow: hidden;
}

.loader div {
	height: 100%;
}

.loader1, .loader1 div {
	box-sizing: border-box;
	border-radius: 50%;
	padding: 8px;
	border: 2px solid transparent;
	-webkit-animation: rotate linear 3.5s infinite;
	animation: rotate linear 3.5s infinite;
    border-right-color: var(--kolor-podstawowy);
    border-left-color: var(--dodatkowy-kolor-logo);
}

.loader, .loader * {
	will-change: transform;
}

.rozdziel-po-bokach {
	display: flex;
	justify-content: space-between;
}

.do-lewo {
	display: flex;
	justify-content: flex-start;
}

.do-prawo {
	display: flex;
	justify-content: flex-end;
}

.loading-logo {
    position: absolute;
    opacity: 0.6;
    margin-left: 4px;
    margin-top: 0px;
    width: 100%;
    height: 100%;
    background: var(--url-logo);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 256px;
}

.css-text-coma {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}