body 
{
  background-color:white !important;	
  margin: 0;
  padding: 0;
  overflow:hidden;
  font-family: 'Helvetica';
  -moz-user-select: none; -webkit-user-select: none; -ms-user-select:none; user-select:none;-o-user-select:none;
}

 .tdbox1 { position: relative; width: 100%; height:100%; }
 .tdbox2 { position: absolute; bottom: -2px; right:2px; color: #4050FF;margin: 0; padding: 0;}

a:hover{background-color:#f0f0f0;}

a {
  background-color: powderblue;
  transition: background-color 1.0s;
}


  #kalendarz {
	  width: 100%; height:100%; text-align:center; margin: 0; padding: 0;
 }
  #kalendarz p {text-align: right;}
  #kalendarz TD {padding:0px 0px; text-align: center;}
  #kalendarz .akt {color: #990000; font-weight: bold;}
  #kalendarz .hidden {visibility: hidden;}
   .nagdwop {overflow:auto; width: 70px !important; height: 36px;color: #8080B0; background-color: #80EE80;border: 1px dashed rgba(0,0,0,0.1);}
   .nagswie {flaot: left;overflow:auto; width: 70px !important; height: 36px;color:white;background-color:#eb4d4b;border: 1px dashed rgba(0,0,0,0.1);}
   .nag {overflow:auto;width: 70px !important; height: 36px;color: #111122; background-color: #efefff;border: 1px dashed rgba(0,0,0,0.1);}   
  
  
   .cetat {background-color: #CCC0C0;border: 1px dashed rgba(0,0,0,0.1);}
   
   .cchoroba {width: 70px; height: 40px; background-color: #bAFFBB; text-align: right;border: 1px dashed rgba(0,0,0,0.1);}
   .curlop {font-size: 0.8em;width: 70px; height: 40px; background-color: #66BBFF; text-align: right;border: 1px dashed rgba(0,0,0,0.1);}
   .curlopr {font-size: 0.8em;width: 70px; height:40px; background-color: #9FFFFF; text-align: right;border: 1px dashed rgba(0,0,0,0.1);}
   .cprazwol {font-size: 0.8em;width: 70px; height: 40px; background-color: #AAAA9F; text-align: right;border: 1px dashed rgba(0,0,0,0.1);}
   .cpuste {
	    font-size: 0.8em;
		width: 70px;
	  	height: 40px;
	    background-color:#ffffff;
		text-align: right;
		
		border: 1px dashed rgba(0,0,0,0.1);
	}
	
	
	.cpusteRazem {
	    font-size: 0.8em;
		width: 70px;
	  	height: 40px;
	    background-color:#f0f0fa;
		text-align: right;
		
		border: 1px dashed rgba(0,60,60,0.2);
	}
	
	/*puste Niedziela*/
   .cpusten {
	    font-size: 0.8em;
		width: 70px;
	  	height: 40px;
	    background-color:#ffe7f1;
		text-align: right;
	/*	box-sizing: border-box;*/
		border: 1px dashed rgba(0,0,0,0.1);
	}	
	/*puste sobota*/
	.cpustes {
	    font-size: 0.8em;
		width: 70px;
	  	height: 40px;
	    background-color:#b1f1b1;
		text-align: right;
	/*	box-sizing: border-box;*/
		border: 1px dashed rgba(0,0,0,0.1);
	}
	
   .cpustesw {width: 70px; height: 40px; background-color: #fff0f0; text-align: right; border: 1px dashed rgba(0,0,0,0.2);}
   .cpracuje {	
               border: 1px dashed rgba(0,0,0,0.2);
	           font-size: 0.9em;
	           width: 70px; height: 40px; background-color: #50F000; color: #000000; text-align: right;
               background-image: url("../obrazki/tlopracuje.png"); background-repeat: repeat-x;  overflow:hidden; 
			   mix-blend-mode: difference;}
  .cpramulti {
              border: 1px dashed rgba(0,0,0,0.1); 	  
	          font-size: 0.9em;
	          width: 70px; height: 40px; background-color: #50F000; color: #000000; text-align: right;
              background-image: url("../obrazki/tlopracmulti.png"); background-repeat: repeat-x;  overflow:hidden; mix-blend-mode: difference;}			  
			  
   .cpracujewiw {font-size: 0.8em;width: 70px; height: 40px; background-color: #E0FFA0; text-align: right;border: 1px dashed rgba(0,0,0,0.2);mix-blend-mode: difference;}
   .cpracujeroz {font-size: 0.8em;width: 70px; height: 40px; background-color: #f9a8a8; text-align: right;border: 1px dashed rgba(0,0,0,0.2);mix-blend-mode: difference;}
   
   .cmalogodz {font-size: 0.8em;background-color: #F05000; color: #000000; height:40px;border: 1px dashed rgba(0,0,0,0.2);}
   .cduzogodz {font-size: 0.8em;background-color: #40F0FF; color: #000000; height:40px;border: 1px dashed rgba(0,0,0,0.2);}
 
 
 
 
   .praclistaetat{
	   width: 260px; height:40px;overflow: hidden; 
	   background-image: url("../obrazki/tlopracuje.png"); 
	   background-color: #E0E0EF; 
	/*   box-sizing: border-box;
	   -moz-box-sizing: border-box;
	   -webkit-box-sizing: border-box;*/
	   background-color: #cff3cf;
	   border-top: 1px dashed rgba(255,255,255,0.2) !important;
	   border-bottom: 1px dashed rgba(40,40,50,0.2) !important;
	   text-align: left;
   }
 
  .praclistaumowa{
	   text-align: left; width: 260px; height:40px;overflow: hidden; background-color: #FFFFFF; 
	   background-image: url("../obrazki/tlopuste.png"); background-repeat: repeat-x;
	   border-top: 1px dashed rgba(255,255,255,0.2) !important;
	   border-bottom: 1px dashed rgba(40,40,50,0.2) !important;
   }
   
 #tabplanpracy 
 {
     width: 100% !important;
     height: auto !important;
     bottom: 0 !important;
     position: absolute;
     top: 80px;
     z-index: -100;
	 padding-left: 15px;
 	 text-align: left !important;
	 padding-top: -20px !important;
 }
 #tabplanpracy #planTitle
 {
	 margin-top: 14px !important;
	 font-size: 21px;
	 margin-left: -8px !important;
	 float:left;

 }
 .tableHeader {
	 width: auto;
	margin-top: 4px;
 }
 body center
 {

 }
 #druk {
	 display: inline;
	 float:left;
	 margin-left: 10px;
	 margin-top: 10px;
 }
 #lowerBar {
	 width: 100%;
	 background-color: #dfdfdf;
	 height: 50px !important;
	 overflow-y: hidden;
	 overflow-x: auto;
 }

.q1 
{
    width:280px !important; 
    height: 36px !important;
    position: absolute;
    left:0;
	top:80px;
	padding-top: 9px;
	padding-left: 4px;
	background-color: #efefff;
	z-index: 2;
	box-sizing: border-box;
}
.q1 input[type=checkbox] {
	width: 20px !important;
	display: inline;
}

.q1 #ilosc {
	text-align: center !important;
	display:block;
	width: 209px !important;
	float: right;
	font-weight: bold;
	padding-top:  1px;
	color: black;
}


.q2 
{
    width: auto !important;
    position:absolute;
    left: 280px;
    right: 15px !important;
    top: 80px;
	font-size: 12px !important;
    height: 36px !important;
    background: white;
	display: block;
    width:2600px; 
	overflow: hidden;
	
	box-shadow: 0px 2px 3px rgba(0,0,0,0.3);
}
.q3 
{
    position: absolute;
    left:0;
    width: 280px !important;
    bottom: 0px !important;
	top: 116px !important;
	overflow: hidden;
	font-size:08em;
	box-shadow: 2px 0px 3px rgba(0,0,0,0.3);
}
.q4 
{
    overflow: auto;
    position:absolute;
    top: 116px;
    right: 15px !important;
    left: 280px;
	font-size: 14px;
	bottom:0;
	z-index: -1;
}

.q3 table tbody tr td input[type=checkbox]
{
	margin-left: 11px;
	margin-right: 7px;
}


.q3 #planp 
{
    width: 280px !important;
    text-align: left !important;
    table-layout:unset !important;
	overflow: hidden;
	font-size: 14px !important;
	right: 15px !important;
}

.praclistaetat 
{
    padding: 0 5px !important;
}


/*właściwiści celi dla widoku godz. od-do, czas, strefa */
.ppcelldivl{
	float:left;
	margin: 0px 0px 0px 6px;
}
	

.ppcelldivp{
	float:right;
	margin: 4px 6px 0px 0px;
	font-weight:bold;
}

.container {}	   
 
 
.igorny {vertical-align: super; font-size: 60%;}
.idolny {vertical-align: sub}	

.searchBox {
	width: 220px;
	left:0px;
	position: absolute;
	top: 44px;
	height: 36px;
}
.searchBox input {
	width: 240px !important;
	height: 36px;
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}
	
.noselect {
 -khtml-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
  user-select: none;
 -webkit-touch-callout: none;
 -webkit-user-select: none;
}	 


#pieczatka {
	float: right;
	text-align: right;
	padding-right: 15px;
	position: absolute;
	right: 0;
	top: 80px !important;
	display: none;
}

 #mask {
	display: none;
	background: #991010; 
	position: fixed; left: 0; top: 0; 
	width: 100%; height: 100%;
	opacity: 0.9;
	z-index: 30;
}


#maskdb {
	display: none;
	background: #0990ff; 
	position: fixed; left: 0; top: 0; 
	width: 100%; height: 100%;
	opacity: 0.9;
	z-index: 10;
}


img.btn_close {
	float: right; 
	margin: 0px 0px 0 0;
}

  #grmsgbox{
	font-size:18px;  
	top: 35%; 
	left: 50%; 
	margin-left: -190px; 
	margin-top: -200; 
	position: fixed; 
	width:380px; 
	height:200px; 
	border: thin solid #5A5AFF;
    background:#FFF0FF; 
	overflow:hidden;
	padding:5px 5px; 
	text-align: center; 
	vertical-align: center;
	z-index: 31; 
	display:none;  
	box-shadow: 0px 0px 20px #999;
	
  }  



   #grinfo{
	   font-size:18px;  
	top: 35%; 
	left: 50%; 
	margin-left: -340px; 
	margin-top: -120; 
	position: fixed; 
	width:680px; 
	height:240px; 
	border: thin solid #5A5AFF;
    background:#FFF0FF; 
	overflow:hidden;
	padding:5px 5px; 
	text-align: center; 
	vertical-align: middle;
	z-index: 31; 
	display:none;  
	box-shadow: 0px 0px 20px #999;
	
  }  
  
#slider {
	position: absolute;
	top: 50px;
	right: 24px;

}
  
  
/*Okno pracownika*/

    #oknoPracown {
	 
		 background:#F0F0FF; 
        text-align:center;
        padding:0 0;
        border:3px solid #DDD7FF;
        top: 35%; 
	    left: 50%; 
	    margin-left: -500px; 
	    margin-top: -200px; 
	    position: fixed; 
	    width:1005px; 
	    height:515px; 
        box-shadow: 0px 0px 12px #D0D0FF;  
		   z-index: 7; 
      }
	  
     #oknoPracownBelka {
		 background: #F0F0FF; 
        text-align: center;
        padding: 0 0;
        border: 1px 0px 0px 0px solid #DDD7FF;
		border-width: 2px 10px 4px 20px;
	    position: fixed; 
	    width: 1000px; 
	    height: 30px; 
        box-shadow: 0px 0px 5px #D0D0FF;  
      }    
	  
 #oPBody {
	    background: #FAFAFF; 
        padding: 30px 0;
	    overflow-y:scroll;
	    width: 1000px; 
	    height: 445px; 
		 border: 1px 1px 1px 1px solid green;
      }    
 .oknoBelka	{
	background: #2660b9; 
	height: 40px !important;
	color: White;
}

.oknoBelka #info {
	float: left;
	height: 40px;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 11px;
	
}
.oknoBelka a {
	height: 30px;
	background: red;
}
	.oknoBelka #usernameDisplay {
		height: 40px;
		color: white;
		float: left;
		min-width: 80px;
		padding-top: 11px;
		font-size: 16px;
		padding-left: 10px;
		padding-right: 10px;
	}
	
	
	 #oknoKontrakt {
	 
		 background:#F0F0FF; 
        text-align:center;
        padding:0 0;
        border:3px solid #DDD7FF;
        top: 35%; 
	    left: 50%; 
	    margin-left: -500px; 
	    margin-top: -200px; 
	    position: fixed; 
	    width:1005px; 
	    height:515px; 
        box-shadow: 0px 0px 12px #D0D0FF;  
		   z-index: 8; 
      }
	
	
	
	#timeoutpik {
		height: 40px;
		float:left;
		padding-top: 11px;
	}
	
	#logOut {
		min-width: 80px;
		padding-left: 10px;
		padding-right: 10px;
		color: white;
		float: right;
		font-size: 16px;
		height: 29px;
		padding-top: 11px;
	}
	#logOut:hover {
		background-color: rgba(255,255,255,0.2);
	}
	
	
	#menu3k{
		padding-left: 10px;
		padding-right: 10px;
		color: white;
		float: right;
		font-size: 16px;
		height: 42px;
		padding-top: 6px;
	}
	#menu3k:hover {
		background-color: rgba(255,255,255,0.3);
	}
	
	#menuwiad{
		padding-left: 10px;
		padding-right: 10px;
		color: white;
		float: right;
		font-size: 16px;
		height: 42px;
		padding-top: 6px;
	}
	#menuwiad:hover {
		background-color: rgba(255,255,255,0.3);
	}

       #menupanelp{
		padding-left: 10px;
		padding-right: 10px;
		color: white;
		float: right;
		font-size: 16px;
		height: 42px;
		padding-top: 6px;
	}
	#menpanelp:hover {
		background-color: rgba(255,255,255,0.3);
	}

	
/*
	file upload
*/
legend
{
	font-weight: bold;
	color: #333;
}

#filedrag
{
	display: none;
	font-weight: bold;
	text-align: center;
	padding: 1em 0;
	margin: 1em 0;
	color: #555;
	border: 2px dashed #555;
	border-radius: 7px;
	cursor: default;
}

#filedrag.hover
{
	color: #f00;
	border-color: #f00;
	border-style: solid;
	box-shadow: inset 0 3px 4px #888;
}





img
{
	max-width: 100%;
}

pre
{
	width: width:120px;
	height: 8em;
	font-family: monospace;
	font-size: 0.9em;
	padding: 1px 2px;
	margin: 0 0 1em auto;
	border: 1px inset #666;
	background-color: #eee;
	overflow: auto;
}

#messages
{
	padding: 0 10px;
	margin: 1em 0;
	border: 1px solid #999;
}

#progress p
{
	display: block;
	width: 240px;
	padding: 2px 5px;
	margin: 2px 0;
	border: 1px inset #446;
	border-radius: 5px;
	background: #eee url("obrazki/progress.png") 100% 0 repeat-y;
}

#progress p.success
{
	background: #0c0 none 0 0 no-repeat;
}

#progress p.failed
{
	background: #c00 none 0 0 no-repeat;
}


#okienkotlo
{
	opacity:0.9; 
	background: #90E0ff;
	z-index: 6; 
	top:0; left: 0; 
	width:100%; height:100%; 
	position: absolute;
    display:none; 
	text-align:center; 
	vertical-align:middle; 
}
#okienkotlo1
{
	opacity:0.9; 
	background: #90E0ff;
	z-index: 8; 
	top:0; left: 0; 
	width:100%; height:100%; 
	position: absolute;
     
	text-align:center; 
	vertical-align:middle; 
}

#okienko
{
	z-index: 7; 
	top: 50%; 
	left: 50%; 
	margin-left: -380px;opacity:1;
        display:none;
        margin-top: -220px; 
	position: absolute;
}

.okienkofs
{
	z-index: 7; 
	top: 100px; 
	left: 10px; 
	width:90%;
    display:none;
	position: absolute;
}



.okienkoknf
{
	z-index: 7; 
	min-height: 100%; 
	min-width: 100%; 
	#top: 50%; 
	#left: 50%; 
	#margin-left: -420px;
	#margin-top: -350px; 
	#opacity:1;
        display:none;
	position: absolute;
}



#okienkoknf
{
        margin-left:15px;
	z-index: 7; 
	min-height: 98%; 
	min-width: 98%; 
	#top: 50%; 
	#left: 50%; 
	#margin-left: -420px;
	#margin-top: -350px; 
	#opacity:1;
        display:none;
	
	position: absolute;
}

#okienkooblinf
{
	z-index: 7; 
	min-height: 40%; 
	min-width: 40%; 
	top: 30px; 
	left: 50%; 
	margin-left: -420px;
	#margin-top: -350px; 
	#opacity:1;
    display:none;
	
	position: absolute;
}


#wydruk{
	width:100%;
	;height:250px;
	border:1px solid #0000FF;
	position:relative;
	;height:800px;
}

.w100{
	width:100%;
	position:absolute;
	height:95%;
	}


/*wyświetlanie zgód w pdf*/
.w100zg{
	width:98%;
	position:absolute;
	height:95%;
	}
	
@media (max-width: 720px) 
{

	.q1 {
		width: 160px !important;
		font-size: 13px !important;
	}
	.q3 {
		width: 160px !important;
	}
	
	.q2 {
		left: 160px !important;
		height: 36px !important;
	}
	
	.q4 {
		left: 160px !important;
	}
	
	.q3 #planp {
		width: 160px !important;
		font-size: 10px !important;
		text-align: left !important;
	}

	.q3 table tbody tr .praclistaetat {
		padding-left: 0px !important;
	}
	
	.searchBox input{
		width: 160px !important;
	}

	.q1 #ilosc {
		width: 125px !important;
		padding-top: 5px;
	}

	#tabplanpracy #planTitle {
		font-size: 15px !important;
		margin-top: 20px !important;
	}
}



.dropbtn {
    background-color: #3498DB;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
    background-color: #2980B9;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown a:hover {background-color: #ddd}

.show {display:block;}
.hide{display:none;}

.guzik:hover
{
	color: #f00;
	border-color: #f00;
	border-style: solid;
	box-shadow: inset 0 3px 4px #888;
	cursor: pointer;
}


/*dialog box tak nie*/

#dialogoverlay{
	display: none;
	opacity: .8;
	position: fixed;
	top: 0px;
	left: 0px;
	background: #FFF;
	width: 100%;
	z-index: 10;
}
#dialogbox{
	display: none;
	position: fixed;
	background: #000;
	border-radius:7px; 
	width:550px;
	z-index: 10;
}
#dialogbox > div{ background:#FFF; margin:8px; }
#dialogbox > div > #dialogboxhead{ background: #666; font-size:19px; padding:10px; color:#CCC; }
#dialogbox > div > #dialogboxbody{ background: #333; padding:20px; color:#FFF; }
#dialogbox > div > #dialogboxfoot{ background: #666; padding:10px; text-align:right; }



/*DASHBOARD STYLE */
.dashboard{
	font-size:18px;  
	top: 10px; 
	left: 10px; /*
	margin-left: -190px; 
	margin-top: -200; */
	position: fixed; 
	width:20px; 
	height:20px; 
	border: thin solid #5A5AFF;
    background:#0FF0FF; 
	overflow:hidden;
	padding:5px 5px; 
	text-align: center; 
	vertical-align: center;
	z-index: 11; 
	transition: .3s;
	box-shadow: 5px 5px #088088;
    border-radius:7px; 
}

.dashboard-x{
  width: calc(100% - 40px);
  height: calc(100vh - 40px);

	
}



.operatorEdit{
	/*display:flex;
	justify-content: center;
	align-items: center;*/
	font-size:19px;  
	top: 160px; 
	left: 200px; 
	/*
	margin-left: -190px; 
	margin-top: -200; 
	*/
	position: fixed; 
	width:40px; 
	height:40px; 
	border: thin solid #5A5AFF;
    background:#0FF0FF; 
	overflow:hidden;
	padding:5px 5px; 
	text-align: center; 
	vertical-align: center;
	z-index: 11; 
	transition: .3s;
	box-shadow: 5px 5px #088088;
    border-radius:7px; 
}

.operatorEdit-x{
  /*height: calc(100vh - 600px);*/
  height: 420px;
  width: calc(100% - 400px);
}


a.button1 {  
  display:inline-block;
  padding:0.2em 1.3em;
  margin:0 0.2em 0.2em 0;
  border-radius:0.5em;
  box-sizing: border-box;
  text-decoration:none;
  font-family:'Roboto',sans-serif;
  font-weight:400;
  color:#000;
  box-shadow:inset 0 -0.6em 1em -0.35em rgba(0,0,0,0.17),inset 0 0.6em 2em -0.3em rgba(255,255,255,0.15),inset 0 0 0em 0.05em rgba(255,255,255,0.12);
  text-align:center;
  position:relative;
}
a.button1:active{
  box-shadow:inset 0 0.6em 2em -0.3em rgba(0,0,0,0.15),inset 0 0 0em 0.05em rgba(255,255,255,0.12);
}
@media all and (max-width:30em){
a.button1{
 display:block;
  margin:0.4em auto;
}
}

a.button1.czerwony
{
   background-color:#ff3369;	
}
a.button1.zielony
{
   background-color:#33ff69;	
}

