@charset "utf-8";

/* CSS Document */

input:focus,textarea:focus {
  border: 2px solid #555;
}

.activbox{
	padding:5px;
	margin:5px;
}
.autobox1{
	background: #FFE3EA;
	border-top: 4px solid #000;
	border-left: 1px solid #aaa;
}


body{font-family:lato;margin:0;}
h1{margin:5px 0;text-align:left;}
h2{margin:5px 0;text-align:left;}
h2 span{margin-left:20px;font-weight:normal;color:#666;}
h3{margin:10px 0;text-align:right;}
h3 span{font-weight:normal;color:#666;}
h4{margin:0 0 5px 0;text-align:left;font-size:18px;}
img{border:0;}
article{min-height:500px;overflow:hidden;color:#333;margin:5px;}
footer{border-top:1px solid #aaa;}
p{margin:0;text-align: left;font-size:18px;}
p span{font-weight: bold;}
a {text-decoration: none;color: #666;}
a:hover{text-decoration: none; color: orange;}
ul{margin:0;padding:0;clear:both;}
ul li{list-style: none;margin:0 3px;}
div{overflow:hidden;}
label{
  border: 1px solid #333;
  padding: 5px;
  border-radius: 3px;
  margin:0 5px;
}
input{
-webkit-border-radius: 3px;
border-radius: 3px;
padding:5px;
color:#666;
margin:10px;
border:1px solid #666;
cursor:pointer;
min-width:10px;
}

tr table tr:hover{border: 1px solid #282828;}

.art_edytor textarea{
    width:800px;
    height: 500px;
}
table input{
	width:auto;
}
input::placeholder {
  color:#aeadad;
}
button{cursor: pointer;}
.h2l{text-align:center;border-bottom:1px solid #000;}
.line{border-top:1px solid #000;}
.lia{text-align:center;
padding: 8px;
border: 1px solid #666;
display: block;
-webkit-border-radius: 3px;
border-radius: 3px;}
.activlia{text-align:center;
padding: 8px;
border: 1px solid #666;
display: block;
-webkit-border-radius: 3px;
border-radius: 3px;
background:#eee;}
#dod_ai{width:70%;}
#suma{margin:right;}
#suma h2{text-align:left;width:250px;float:right;}
#wykres{max-width:1500px;}
#wykres table{width:100%;}
#wykres tr td{text-align:center;}
#wykres tr td:first-child{width:70%;}
#wykres tr:hover td {background: none;}
#menu2{border-bottom:1px solid #aaa;border-top:1px solid #aaa;overflow:hidden;padding:3px 0;}
#menu2 li{float:left;}
.alart,.alart a{background: #eaa;
color: #fff;}
.disp,.disp a{background: #dae;
color: #fff;}
.follow,.follow a{background: #ddd;
color: #fff;}

.alart a{color:#fff;}
.smoll{font-size:12px;color: #666;}
.goodd{
	background: #00800073 !important;
	color: #fff !important;
	text-align: center !important;
}
.goodd span{color: #fff !important;}
.errorr{
	background: #800000bf !important;
	color: #fff !important;
	text-align: center !important;
}

.errorr span{color: #fff !important;}

.good1{color: green;}
.error1{color: #FF6767;}
.good, .good a{
text-align: center;
font-weight: bold;
color: #6e9790;
padding: 5px;}
.infoo{
	font-weight: bold;
	color:#8cb534;
}
.normal{
font-weight: bold;
color: #6e9790;
}
.goodb{background:#8bb38b;color:#fff;}

.small{font-size:14px;}
.lia:hover{background:#eee;}
.clear{clear:both;}
.loginf{clear:both;}
.loginf h2{text-align:center;}
.menu{width:100%;overflow:hidden;clear: both;margin:5px 0;}
.menu ul{margin:0;}
.menu ul li{padding: 0;margin:0 5px 0 0;width:200px;font-weight:bold;float:left;}
.left{
	float: left;
	display: inline;
	margin: 10px 10px;
	overflow: hidden;
}
.left ul li{clear: both;overflow:hidden;text-align:left;padding: 5px 0} 
.right{float: right;margin: 0 0 0 10px;width:inherit;}
.right p{text-align:left;}
.login{float:right;font-size:16px;color:#999;margin:10px 20px;display: block;}
.inlinesparkline{width:300px;height:300px;}
.kropa{margin:5px 0;padding:0;overflow:hidden;}
.kropa li{float:left;text-align:left;padding:0 10px 5px 0;margin:0;}
.box{border:1px solid #aaa;padding:3px;width:200px;text-align:left;float:right;}
.box .span{color: #666;padding:7px 0 0 10px;text-align:left;}
.box1{

width:40px;
height:40px;
-moz-border-radius: 20px; 
-webkit-border-radius: 20px; 
border-radius: 20px;
background: gray;
float:left; }
.box2{
text-align:center;
margin:4px; 
border-style:dashed; 
border-width:1px; 
border-color:#fff;
border-radius: 20px;

font-size:25px;
font-weight:bold;
width:30px;
height:30px;
-moz-border-radius: 15px; 
-webkit-border-radius: 15px; 
background: gray; 
color:#fff;
float:left; }
.alink{

font-size:34px;
font-weight:bold;
width:50px;
height:50px;
-moz-border-radius: 25px; 
-webkit-border-radius: 25px; 
border-radius: 25px;
background: orange; 
color:#fff;
float:left; }
.alink2{
margin:4px; 
border-style:dashed; 
border-width:1px; 
border-color:#fff;
border-radius: 20px;

font-size:34px;
font-weight:bold;
width:40px;
height:40px;
-moz-border-radius: 20px; 
-webkit-border-radius: 20px; 
background: orange; 
color:#fff;
float:left; }
.alink1 {padding:17px;text-align:left;overflow:hidden;}
.k1{

font-size:34px;
font-weight:bold;
width:30px;
height:30px;
-moz-border-radius: 15px; 
-webkit-border-radius: 15px; 
border-radius: 25px;
background: orange; 
color:#fff;
float:left; }
.k2{
margin:4px; 
border-style:dashed; 
border-width:1px; 
border-color:#fff;
border-radius: 20px;

font-size:34px;
font-weight:bold;
width:20px;
height:20px;
-moz-border-radius: 10px; 
-webkit-border-radius: 10px; 
background: orange; 
color:#fff;
float:left; }

table {
border-collapse: collapse;
border-spacing: 0;
display: table;
color:#000; 
webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
}

.urele1 tr{
    border-bottom: 3px solid #333;
}

td{
padding:3px 2px;
vertical-align: middle;
  text-align: left;
  padding:3px;

  overflow: hidden;
  text-overflow: ellipsis;
    white-space: -pre-wrap;     /* Opera 4-6 */
    white-space: -o-pre-wrap;   /* Opera 7 */
    white-space: -moz-pre-wrap; /* Mozilla */
    white-space: -hp-pre-wrap;  /* HP Printers */
    word-wrap: break-word;  
 }



.tab{float:left;padding:0 3px;}
.tab tr:nth-child(odd) {
background-color: #eee;  
}
.tab td {
border:1px solid #999; 
text-align:center;  
}
.tab th{
	border: 1px solid #000;
	background: orange;
	color: #fff;
	text-align: center;
	padding:3px;
}

.tab td:first-child {
    text-align:left;
}

.tab tr:first-child td {
font-weight:bold;
background:#FFD557;  
}
input[type="file"]{width:200px;display: block;}
.tab table tr td:last-child{
#background:yellow;
}
textarea{height:200px;width:400px;} 
.tl{text-align:left;}
.przycisk{border:1px solid #aaa;padding:3px;margin-right:10px;width:35px;float:left;}
.info{text-align:center;background:#CCFF99;}
.error,.error a{text-align:center;background:#FF3C3C !important;color:#fff !important;padding:5px;border-radius: 15px;}
.edytorpoz input{padding:3px; width:400px;} 
.edytorpoz textarea{height:100px;width:400px;} 
.edytorpoz input[type="submit"]{width:150px; !importent }
.alartinfo{width:100%;background:#66ccff;color:#fff;}
.alartinfo a{color:#fff;}
.alartinfo td{border:3px solid #fff;padding:5px;border-right:1px solid #333;} 
.red{color:#FF3C3C;}
.zadaniainfo{border:none;width:100%;border-collapse: collapse;color:#fff;
border-spacing: 0;} 
.zadaniainfo tr{border:none;}
.zadaniainfo td{padding:5px;border: 3px solid #fff;} 

.lzl{float:left;height:40px;border:1px solid #333;padding:5px;margin:3px;min-width:150px;}
.lzl span{color:#62AD48; font-size:20px;}
.activelist a{color: orange;}
.pdf span{text-align:right;font-size:15px;color:#666;}

#menupanel li{float:left;}
.boxbottom{float:left;width: 200px;}
.boxbottom h3{text-align:center;}
/* firmy */

.firmy td{
	color:#444;
}
.firmy td{
	border:1px solid #666;
	padding:5px;
	margin:0;
}
.firmy h1{
	font-size: 18px;
}
.firmy .good{background:orange;padding:5px;color:#fff;font-weight:bold;margin:3px;}
.firmy .best{background:green;padding:5px;color:#fff;font-weight:bold;margin:3px;}


.firma tr:hover td {
	background: none;
}
.firma td{
	color:#444;
	width:50%;
}
.firma td{
	border:1px solid #666;
	padding:5px;
	margin:0;
}
.firma h1{
	font-size: 18px;
}
.firma .good{background:orange;padding:5px;color:#fff;font-weight:bold;margin:3px;}
.firma .best{background:green;padding:5px;color:#fff;font-weight:bold;margin:3px;}
.firma textarea{margin:0;height:400px;width:90%;padding:5px;}
.firma input{width:90%;padding:5px;}
#opis{height:500px;}

#ull{text-align:left;}

#login{
clear:both;
text-align:center;
width: 290px;
margin: 20px auto;
border:2px solid #fff;
padding:5px;
overflow:hidden;
}

#login input{
-webkit-border-radius: 5px;
border-radius: 5px;
width: 250px;
text-align:left;
padding:10px;
color:#888;
background-color:#fff;
margin:10px;
font-size:20px;
border:1px solid #666;
}

#login input[type="submit"]{
padding:10px 20px;
width: auto;
text-align:center;
color:#fff;
background:green;
border:none;
cursor:pointer;
}
#zh{text-align:right;}
#zh a{color:#aaa;}
#urele{clear: both;margin: 0 auto;}
#urele td{text-align:left;border:1px solid #aaa;}
.urele1{clear: both;margin: 0 auto;}
.urele1 th{padding: 5px;}
.urele1 tr:hover, .urele1 tr:hover .smoll, .urele1 tr:hover a{background:#ccf7cc;color:#666666;}
.urele1 tr:hover a{background:#ccf7cc;color:#666666;text-decoration: underline;}
.urele1 tr:hover .good{color:#6bb56b;}
.urele1 td{text-align:left;border:1px solid #666;padding: 5px;max-width: 500px;}
.border{border:1px solid #aaa; padding:5px;}
.tbg,.urele1 th{background:orange;color:#fff;}
.tbg td{text-align:center !important;}
.t0{color:red;}
.t1{color:gray;}
.t2{color:green;}
.center{text-align:center !important;}
#chart_div{width: 100%; height: 400px;}
#monit a{color:#fff;}

.boxinfo{
	border:1px solid #999;
	font-size:14px;
}
.boxinfo h3,.boxinfo a{
	padding: 5px;
	border-bottom: 1px solid #999;
	background: #ffc266;
	color: #fff;
	margin: 0;
	text-align:center;
}
.boxinfo h4{
	text-align:center;
}
.boxinfo p{
	padding:5px;
	border-top: 1px solid #999;
}
.boxinfo input{
	font-size:14px;
}
.boxinfo input[type=text]{
	width: 100%;
	border-radius: 0;
	border: none;
	margin: 0;
	padding: 5px 0;
	background:#ffedda;
}
.boxinfo input[type=submit]{
	text-align: center;
	width: 100%;
	margin: 0;
	padding: 10px;
	border: none;
	background: #638463;
	color: #fff;
	font-weight: bold;
	border-radius: 0;
}
.boxinfo input[type=reset]{
	text-align: center;
	width: 100%;
	margin: 0;
	padding: 5px;
	border: none;
	background: #b7b7b7;
	color: #fff;
	font-weight: bold;
	border-radius: 0;
}
.boxinfo textarea{
	border:0;
	width: 500px;
	height: 200px;
	padding:5px;
}
.boxinfo input[type=radio]{
	width: auto;
	height: auto;
}
.boxinfo select{
	width:100%;
	background:#fffeeb;
}
.test{
	background:#9e67c3;color:#fff;
}
.standard{background: #66ccff;color:#fff;}
.wazne{background: #b10000;color:#fff;}
.op{background:  #379b3c;color:#fff;}

table tr th input{
	border: none;
background: none;
font-size: 14px;
color: #fff;
font-weight: bold;
text-decoration: underline;
}

#autolink td{ 
	text-align:center;
}

.okna{
		flex-basis: 0;
		flex-grow: 1;
	}
	.okno{
		display: flex;
	}


    .button {
  background-color: #4CAF50; /* Kolor tła */
  border: none;
  color: white;
  padding: 5px 14px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  border-radius: 8px;
  transition: background-color 0.3s, transform 0.2s;
}

.button:hover {
  background-color: #45a049; /* Kolor po najechaniu */
  transform: scale(1.05); /* Powiększenie */
}

.button:active {
  background-color: #3e8e41; /* Kolor po kliknięciu */
  transform: scale(0.98); /* Minimalne zmniejszenie */
}


.spinner {
  display: block;
  width: 100%; /* Szerokość paska */
  //max-width: 300px; /* Maksymalna szerokość */
  height: 3px; /* Wysokość paska */
  background-color: #e0e0e0; /* Kolor tła */
  border-radius: 8px; /* Zaokrąglone rogi */
  overflow: hidden;
  position: relative;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Delikatny cień */
}

/* Animowane wypełnienie */
.spinner::before {
  content: "";
  display: block;
  width: 100%; /* Szerokość przesuwającego się paska */
  height: 3px;
  background: linear-gradient(90deg, #ff6b6b, #feca57, #1dd1a1, #54a0ff);
  background-size: 300% 100%; /* Rozciągnięcie gradientu */
  position: absolute;
  left: -30%; /* Początkowa pozycja poza widocznym obszarem */
  animation: loading-bar 2s infinite; /* Płynna animacja */
  border-radius: 8px; /* Zaokrąglone rogi wypełnienia */
}

/* Kluczowe klatki animacji */
@keyframes loading-bar {
  0% {
    left: -30%;
    background-position: 0% 50%; /* Start gradientu */
  }
  50% {
    left: 50%;
    background-position: 100% 50%; /* Przesunięcie gradientu */
  }
  100% {
    left: 100%;
    background-position: 200% 50%; /* Wyjście poza widoczne */
  }
}


@media only screen and (max-width:800px), only screen and (max-device-width: 800px) {
	.okna{
		flex-basis: 100% !important;
	}
	.okno{
		display: block;
	}
	
	
	#monit,#urele, .urele1,#autolink,.urele1 {    
		display: block;
		overflow: scroll;
		width: 650px;
	}
	
	.right{
	float: none;
	clear: both;
	
	}
	#chart_div,#curve_chart,#piechart{display:none;}
	
	#wykres tr td{display:block;}
	#wykres tr td:first-child{width:100%;}
}