:root {
     --dno: grey;	
     --colorW: white;     /* -pozadina login */
     //--back: black;     /* -pozadina login */
	 --back: #000033; 
	 --back: #001a1a; 
	 --back_levi: #202020; 
	 
	 --back2: black; 	/* -pozadina  */
     --color2: grey; 	/* slova  */
     --colorTab: black; 	/* poyadina Tab  */
	 --color1: #80ccff; /* meni slova  */
	 --color2: #b3ffec; /* stacionar  */
	 --hcolor1: red;	/* meni hover  */
	 --c1: grey; 
	 --c2: white;
	 --lune_back: #003333;
	 --color: grey; 
	 --color0: white; /* meni slova  */
	 --color3: black; /* meni slova  */
 
	 --font1: 30px; /* meni  */
	 --font2: 25px; /* meni  */
     --font3: 20px; /* meni  */
     --font3: 15px; /* meni  */
	 
	 --zeleni: #ecffe6; /* meni  */
	 --colorfront: white;
	 
	 --colorcrni: white;
	 --colorplavi: #0099ff;


	 --colorback: #003333;
	 --colorback: #E0E0E0;
	 --colorback: #ffcccc;
	 --colorback: #b3ccff;

}

#myBtn {
  display: none;
  position: fixed;
  bottom: 10px;
  right: 10px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: grey;
  color: white;
  cursor: pointer;
  padding: 7px;
  border-radius: 10px;
  opacity: 0.3;
  width:50px;
}

#myBtn:hover {
  background-color: #555;

}


br {
  display: block;
  margin-bottom: 2px;
  font-size:2px;
  line-height: 2px;
}
{
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    -o-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}
.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
} 
.demo-wrap {
  position: relative;
}
.demo-wrap:before {
  content: ' ';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.6;
  background-image: url('ICON.png');
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
}
.main {
    margin: 10px;

}

hr.half-width{
  width:100%;
  margin: 10 auto;
}
hr.half-height{
  border: 2px solid green;
  margin: 0px 0px 10px 0px;
}
div.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background-color: yellow;
  padding: 50px;
  font-size: 20px;
}

#ctxmenu {
  position: fixed;
  background: ghostwhite;
  color: black;
  cursor: pointer;
  border: 1px black solid
}

#ctxmenu > p {
  padding: 0 1rem;
  margin: 0
}

#ctxmenu > p:hover {
  background: black;
  color: ghostwhite
}
.right_menu {
  position: fixed;
  background: ghostwhite;
  color: black;
  cursor: pointer;
  border: 1px black solid;
  z-index:1000;
}

.right_menu > span {
  padding: 0 1rem;
  margin: 0
}

.right_menu > span:hover {
  background: black;
  color: ghostwhite
}


.bodyW{color:grey; background:var(--back); padding:0px; margin:0px; transition: 1.0s;}
.bodyB{color:red; background:var(--back); padding:0px; margin:0px; transition: 1.0s;}
.bodyT{color:red; opacity: 1; background:var(--back); padding:0px; margin:0px; transition: 1.0s;}

.MENI_RM{position:absolute; display:block;  z-index:1000; float:right;  color:grey; padding:0px; margin:0px; 
	   border:5px solid grey; border-radius:0px 10px; width:0px; left:-10px; height:100%; transition: width 1s;
}
.MENI_RMR{position:absolute; z-index:1000; float:right;  color:grey; padding:0px; margin:0px; 
	   border:5px solid grey; border-radius:10px 0px; 
	   height:100%; transition: width 1s;
}

.tab_wiev{ background:black; color:white; width:100%; padding:5px; padding-left:150px; text-align:right; font-size:var(--font1); opacity:0.2;} 
.tab_wiev:hover {  opacity:1; }
 
.tab_meni{ cursor:pointer; text-align:center; z-index: 101; min-width:70px;font-size:var(--font2); color:var(--color1);  } 
.tab_meni:hover { color: white; font-weight: bold;  border:2px solid grey; border-bottom:0px solid grey; border-radius:0px 10px 0px 0px; background-color:#80ccff; } 

.trr {background:transparent;  }
.trr:hover { background:#F5F5F5; }

.t_sel {background:transparent; cursor:pointer;  }
.t_sel:hover { background:#ecffe6; }
.t_sel:disabled  { background:#F8F8F8; }
.t_sel:read-only  { color:grey !important; }
input:read-only {
  color:grey !important;
  
}
/* border:2px solid black; border-radius:20px 20px 20px 20px ;  */

.separator {display:block; position:absolute; z-index:100; cursor:col-resize; top:0px; width:10px; height:40px; background:grey; border-radius:20px 0px 0px 0px; float:left; top:0px; border:0px solid black; opacity:0.1;}
.separator:hover { opacity:1;}
.separator_ico {display:block; position:absolute; z-index:100; cursor:pointer; top:0px;  height:30px; float:left; top:0px; border:0px solid black; opacity:0.5;}
.separator_ico:hover { opacity:1;}
.mmcrni{  cursor:pointer; z-index: 101; font-size:30px; font-weight: bold;  color:var(--colorcrni);  opacity:0.5; border-radius:0px; border:0px solid white; } 
.mmcrni:hover {  opacity:1; } 
 .uvod_meni2 {  font-size:20px; cursor:pointer; width:100%; min-width:300px; height:auto; float:left;  margin:0px; padding:10px; display:block;  background:white; color:black;  border:3px solid var(--colorback); border-radius: 10px ;  }
.uvod_meni2:hover{  background:black; color:white;  box-shadow: 0px 15px 10px rgba( 0.2, 0.2, 0, 0.4 ) } 
 
.div_polje {border:0px solid black; border-bottom:0px solid black; }
.div_polje:hover { background: #e6ffff;}

.input_unos{
	min-width:10px; min-height:30px; width:auto; overflow-y:hidden; padding-left:10px; 
	border:0px solid rgba(63,63,63,1); border-bottom:1px solid black;
}
 .input_unos:hover { background-color: var(--select);}
 .input_unos:focus { border: 0px solid #ddd; box-shadow: 0px 15px 10px rgba( 0, 0, 0, 0.2 )}

.Obavestenje{ z-index: 10010;  position:absolute; opacity: 1; border-radius:20px ; padding:0px;  background:white; color:black; left:5%; top:5%; border: 5px solid red;
  transition-property: display;
  transition-duration: 5s;
  transition-delay: 2s; }
  
.p_dugme{ cursor:pointer; padding-left:15px; padding-right:15px; font-weight: normal; color:var(--co_icon); border:0px solid blue; }
.p_dugme:hover{ color:red; } 

.lista_c{ cursor:pointer;  font-weight: normal; color:var(--co_icon); border:0px solid blue; }
.lista_c:hover{ color:red; } 

.lista_opis{ font-weight: normal; color:grey; font-family: Verdana, Helvetica, sans-serif; }
.lista_opis:hover{ color:black; } 
/* .p_dugme:hover{ background:#006666; color:white; font-weight: bold;  outline-color: coral;} var(--lune_back)
 */
  
.ob_text{padding:0px; text-align:center; top:10%; margin:0px; background: transparent; font-size: 20px;}
.zastor{ position:absolute; z-index: 10009; opacity: 0.5; padding:0px; background:black; color:grey; top:0; left:0; width:100%; height:100%; border: 10px solid grey;}
.ob_ok{ float:right; background-color:transparent; padding: 10px; color:black; text-align:center; width:80px; font-size:15px; border-radius:20px; border:1px solid grey;}
.ob_ok:focus{ background-color: #0033cc; color:white;   }
.ob_ok:hover{ background-color: #ccd9ff; color:black; border-radius:80px;}


/*  body {  display:block;padding:0px; margin:0px; height:100% !important; font-family: Arial; 
  font-size:var(--font1); overflow:auto;
 }  */
 .div_visi{ transition: visibility 2s, opacity 0.5s linear;}
 .tab_but {  cursor:pointer; float:left; font-size:15px; margin:0px; padding:5px 10px 0px 10px; display:block;  background:black;color:white; height:27px; border:0px solid black; border-radius: 10px 10px 0px 0px;  }
.tab_but:hover{  float:left; background:var(--colorTab); transition: 0.3s; border: 2px solid black; border-radius: 10px 10px 0px 0px;   } 

 .uvod_meni {  font-size:20px; cursor:pointer; width:300px; height:40px; float:center;  margin:0px; padding:10px; display:block;  background:white; color:black;  border:3px solid black; border-radius: 10px ;  }
.uvod_meni:hover{  background:black; color:white;  box-shadow: 0px 15px 10px rgba( 0.2, 0.2, 0, 0.4 ) } 


.lmeni { opacity:1;  transition: width 1s; float:left; font-size:25px; border-radius: 0px 0px 20px 0px;  }
.lmeni:hover{  opacity:1;   } 

.dmeni { opacity:1; transition: left 1s; transition: display 2s; float:left; font-size:25px; border-radius: 20px 0px 0px 20px;  }
.dmeni:hover{  opacity:1;   } 

.input1 { width:250px; font-size:40px; text-align:center; height:50px; background:white; border:1px solid grey; border-radius:20px; padding:15px; }

.inputE { float:left; width:100%; font-size:30px; text-align:center; height:50px; background:#E8E8E8; border:1px solid grey; border-radius:10px 10px 10px 10px; padding:20px 5px 5px 5px; color:blue; }
.inputE:hover{ border: 2px solid red;    } 
.inputE:focus{ border: 2px solid red; background:white; color:red;   } 
.input_div{ float:left; margin: 0px; padding:5px 5px 0px 5px; width:100%; border:0px solid black;   }
.input_naslov { position:absolute;  margin: 0px; padding:0px 10px 0px 10px;  z-index:10000; font-size:15px;  }
/* .input_naslov { position:relative; top:2px; margin: 0px; padding:0px 10px 0px 10px;  z-index:-10000; font-size:15px; border-top:1px solid grey; border-left:1px solid grey; border-right:1px solid grey;  border-radius:10px 10px 0px 0px; background:#E8E8E8; } */
.input_div_R{ float:left; padding:5px; width:300px;}

.dugme { width:98%; font-size:20px; background:#e6ffff; color:black; border:0px solid grey; border-radius:10px; padding:5px 5px 5px 5px ;  }
.dugme:hover{  cursor:pointer; background:#00ffff; transition: 0.3s; border: 2px solid black; border-radius: 30px ;   } 
 .datum100_dmy{background-color:transparent; text-align:center; border:1px solid black; width:100%;}
.datum100_dmy:focus{ color:red; border:1px solid blue !important; }


.zaglavlje {    position: -webkit-sticky;
  position: sticky; width:100%; height:50px; background:var(--color1); border:1px solid white; border-radius:0px 30px 0px 0px; padding: 5px; }
.tab_div {  display:none;width:100%; height:90%; border:1px solid grey; overflow-y: hidden !important;}
.icon_css{ cursor:pointer; z-index: 101; margin:0px; padding:0px; font-size:var(--font2); color:var(--color2); font-weight: bold; } 
.icon_css:hover { color: var(--color1); font-weight: bold; } 
 
 .oblak { position:absolute; z-index: 5000; display:none; transition: display 2s; z-index:1000;font-size:15px; margin:0px; padding:5px; background:white; color: #008fb3; border:1px solid grey; border-radius: 0px 10px 10px 10px;  }

 .mali_meni { position:absolute; z-index: 5000; display:none; transition: display 2s; z-index:1000;font-size:15px; margin:0px; padding:5px; background:black; color: #008fb3; border:0px solid grey;   }

.desni_meni { position:absolute; z-index: 5000; display:none; transition: display 2s; z-index:2000;font-size:15px; margin:0px; padding:0px; padding-top:10px; padding-bottom:10px;  background:black; color: #008fb3; border:2px solid grey; box-shadow: 0px 15px 10px rgba( 0.2, 0.4, 0, 0.4 ); border-radius:5px 5px 5px 5px;   }

 .meni1 { position:absolute;display:none; z-index:1000;font-size:15px; margin:0px; padding:10px 20px 10px 10px; background:white;color:red; border:1px solid grey; border-radius: 0px 10px 10px 10px;  }
  



.menu_back{  font-size:20px; text-align:left; color:black;  }
.menu_caption{ float:left; width:100%; cursor:pointer; padding:5px 5px 5px 15px;  font-size:20px; text-align:left; color:var(--colorW); background:var(--color1);  border: 1px solid white; border-radius: 10px 10px 0px 0px; font-weight: bold; transition: 1.0s;}

.menu_button{ float:left; width:98%;  cursor:pointer; padding:5px 5px 5px 15px; font-size:20px; text-align:left; color:var(--color2); background:var(--back2); border: 1px solid grey; border-radius: 10px; }
.menu_button:hover{  font-size:20px; text-align:left;  background:var(--color1); transition: 0.3s; border: 1px solid white; color:white;} 


.top_fix{ position:sticky; top:0px; background:blue; color:white; font-size:15px;}
.left_fix{ position:sticky; left:0px; background:blue; color:white; font-size:15px; z-index:0;}

/* .ksabs{ position:absolute;  cursor:pointer; z-index: 101; font-size:var(--font1); color:var(--color); font-weight: normal; } 
.ksabs:hover { color: var(--hcolor); font-weight: bold; }  */
.ksabs{ float:right;  cursor:pointer; z-index: 101; font-size:var(--font1); color:white; font-weight: normal; } 
.ksabs:hover { color: grey; font-weight: bold; }

.opis{ font-size:var(--font3); color:grey;  } 
 

.main_meni{ cursor:pointer; font-weight: normal; height:100%; padding:10px; z-index: 101; font-size:18px; color:grey;  } 
.main_meni:hover {  font-weight: bold; } 

.linkmeni{ cursor:pointer; z-index: 101; font-size:var(--font2); color:var(--color1); font-weight: bold; } 
.linkmeni:hover { color: var(--hcolor1); font-weight: bold; } 
 
.linkmeniM{ cursor:pointer; z-index: 101; font-size:var(--font2); color:var(--color1); font-weight: normal; } 
.linkmeniM:hover { color: var(--hcolor1); font-weight: bold; } 
.linkmeniMT{ 
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none;  
cursor:pointer; z-index: 101; font-size:var(--font2); color:white; font-weight: normal; } 
.linkmeniMT:hover { color: var(--hcolor1); font-weight: bold; } 

.linkmeniMS{ 
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none;  
cursor:pointer; z-index: 101; font-size:var(--font2); color:grey; font-weight: normal; } 
.linkmeniMS:hover { font-weight: bold; } 


.linkmeniC{ cursor:pointer; z-index: 101; font-size:var(--font2); color:black; font-weight: bold; } 
.linkmeniC:hover { color: var(--hcolor1); font-weight: bold; } 

.mmmeni{  cursor:pointer; z-index: 101; font-size:35px;  font-weight: bold; color:grey; opacity:0.5;} 
.mmmeni:hover {  font-weight: bold; opacity:1;} 

.topbutton_R{ color:red; cursor:pointer; z-index: 101; font-size:35px;  font-weight: bold; opacity:0.5;  float: right !important;}
.topbutton_R:hover {  font-weight: bold; opacity:1;} 

.dugme_L{ color:white; cursor:pointer; z-index: 101; font-size:35px;  font-weight: bold; opacity:0.5; float: left !important;} 
.dugme_L:hover {  font-weight: bold; opacity:1;} 

.dugme_R{ color:white; cursor:pointer; z-index: 101; font-size:35px;  font-weight: bold; opacity:0.5;  float: right !important;}
.dugme_R:hover {  font-weight: bold; opacity:1;} 

.mm_icon{  text-shadow: 0px 10px 10px rgba( 0, 0, 0, 0.2 ); cursor:pointer; z-index: 101; font-size:30px; font-weight: bold; opacity:0.5;} 
.mm_icon:hover {  opacity:1; font-weight: bold; } 

.mm_icon2{  text-shadow: 0px 10px 10px rgba( 0, 0, 0, 0.2 );  background:transparent;} 
.mm_icon2:hover {  background:#F0F0F0;  } 



.link{  cursor:pointer; z-index: 101; color:var(--hcolor); font-weight: normal; font-family: Arial, Helvetica, sans-serif; } 
.link:hover { color: white; font-weight: bold; } 

101; font-size:var(--font1); color:var(--color); font-weight: bold; } 
.ksmeni:hover { color: var(--hcolor); font-weight: bold; } 
.mmm{ position:absolute; opacity: 1; padding:15px 15px 15px 15px; background:black; color:grey; top:50; border: 5px solid grey;}
 
.zastor7{ position:absolute; 
 opacity: 0.0; padding:0px; background:black; color:grey; top:0; left:0; width:100%; height:93%; border: 1px solid grey;}


h2 {
  border-bottom: 2px solid #1e90ff;
}
button {
  background-color: #ffffff;
 
  color: var(--color1);
  border: 1px solid #1e90ff;
  padding: 5px;
}


.tab {
  overflow: hidden;
  border: 0px solid #ccc;
  background-color:  var(--back2);
  padding: 0px;
}

.tab button {
  background-color: inherit;
  color: var(--color);
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 5px 10px 5px 10px;
  transition: 0.9s;
  font-size: var(--font1);
  text-align:center;
}


.tab button:hover {

  /* border-bottom: 2px solid white; */
  color: var(--color1);
  
}


.tab button.active {
  background-color: var(--back2);
  
}

.tabcontent {
  display: none; float: right;  overflow:auto; padding: 0px;
 
  border: 0px solid black;
}

.tableft{ padding: 2px;
border: 0x solid green; float:left ; width:550px; background:var(--back2); overflow:auto;
} 



.borderless tr td {
    border: none !important;
    padding: 2px !important;
}
input[type="text"]
{
    font-size:18px;
}

.input[type='time']::-webkit-datetime-edit-hour-field:focus {
  background-color: #3783f6;
}
.input[type='time']::-webkit-datetime-edit-minute-field:focus {
  background-color: #3783f6;
}
.input[type='time']::-webkit-datetime-edit-ampm-field:focus {
  background-color: #3783f6;
}
		  
input[type="date"]::-webkit-datetime-edit, input[type="date"]::-webkit-inner-spin-button, input[type="date"]::-webkit-clear-button {
  color: #fff;
  position: relative;
  /* font-size:15px; */
  cursor:pointer;
}

input[type="date"]::-webkit-datetime-edit-year-field{
  position: absolute !important;
  border-left:1px solid #F5F5F5;
  border-right:1px solid #F5F5F5;
  padding: 2px;
  color:#000;
  left: 65px;
  
  /* background: #F5F5F5; */
}

input[type="date"]::-webkit-datetime-edit-month-field{
 
  position: absolute !important;
  border-left:1px solid #F5F5F5;
  padding: 2px;
  color:#000;
  left: 32px;
}


input[type="date"]::-webkit-datetime-edit-day-field{
  position: absolute !important;
  border-left:1px solid #F5F5F5;
  color:#000;
  padding: 2px;
  left: 5px;
  
}

@media screen and (max-width: 600px) {
	.tableft{ padding: 2px;
				border: 0x solid green; float:left ; width:385px; background:green; overflow:auto;
			} 
}
/*
@media print {
  div.divFooter {
    position: fixed;
    bottom: 0;
  }
    @page {
      size: A4;  DIN A4 standard, Europe 
	  size: landscape;
	  
      margin: 0;
    }
	
}*/