/* <?php МИЛАН	МАРИЋ	ГОЈКО	0668660501 da ga iskljucimo iz poziva

  $boja="black";
?> */ 
@media print{@page {size: landscape}}
.textX{
  mso-number-format:"\@";/*force text*/
}
:root {
  --back: #1e90ff; 
  --back1: #e6ffff;
   --back: grey;
    --back1: grey;
--hcolor: white;

  --color: grey;


 --hcolor1: red;
  
  --font1: 35px;
  
  --color2: grey;
  --back2: black;
  --tab_back3: black; 
  --tab_back2: #660000; 
 --backN: #660000; 
--tab_back2: #003300; 
--backN: #003300; 
 --colorN: #660000; 
 
}

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 34px !important;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
}
/* width */
::-webkit-scrollbar {
  width: 10px; height: 10px; 
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey; 
  border-radius: 10px; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #E0E0E0; 
  border-radius:  10px; cursor:pointer; 
  border: 1px solid var(--colorN);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background:  #660000; 
}

.main {
    margin: 0px;
    padding-bottom: 0px; #ffffff;
	
    //border-bottom: 1px solid #ddd;
}/**/
 body{ display:block; padding:0px; margin:0px; height:100% 
 font-family: Arial; background:black; font-size:var(--font1);
 overflow: hidden; 
  
/*//background: linear-gradient(180deg,var(--back) 50%,var(--color) 0);background:white;!important; 
*/

}

.material-symbols-outlined {
  font-size:30px;
  font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 0
}
.bodyB{color:red; background:black; padding:0px; margin:0px; transition: 1.0s;}
.bodyC{color:red; background:black; padding:10px; transition: 2.0s;}

.tab_users{ position: -webkit-sticky; position: sticky;   background-color:  var(--tab_back2);}
  
.sat{  font-size:15px; color:grey; padding-right:10px; }
.user{  font-size:22px; color:white;  }
.user_dr{  font-size:22px; color:var(--color2);  }
.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:white; background:var(--tab_back3); border: 1px solid white; border-radius: 0px; font-weight: bold; transition: 0.5s;}
.top_resize{ cursor: move; z-index: 901; float:left;  position:absolute;  top:5px; left:5px; background:black; border-radius: 10px; color:white; font-size:25px; opacity: 0.1; }
.top_resize:hover{  background:black; border:0px; color:white;  opacity: 1;}

.tabG{ cursor: pointer; z-index: 901; float:left;  position:absolute;  top:5px; left:5px; background:white; border-radius: 10px 10px 0px 0px; color:black; font-size:25px; opacity: 0.5; }
.tabG:hover{  background:white; border:2px; color:black;  opacity: 1;}


.top_button{ position:absolute; top:5px; left:5px; background:black; border-radius: 10px; color:white; font-size:25px; opacity: 0.2; }
.top_button:hover{ position:absolute; top:5px; left:5px; background:black; border-radius: 10px solid white; color:white;  opacity: 1;}

.menu_button{ float:right;width:100%;  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:grey; transition: 0.3s; border: 1px solid white; color:white;}
.topbutton_R{ z-index: 910;  color:white;  float: right !important;}

.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(--hcolor1); font-weight: bold; } 

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

.gmeni{  z-index: 101; font-size:30px; } 
.gmeni:hover { color: red; font-weight: bold; font-size:40px; } 

.ksmeni{ cursor:pointer; z-index: 101; font-size:var(--font1); color:red; font-weight: bold; } 
.ksmeni:hover { color: var(--hcolor); font-weight: bold; } 

.tabmeni{ cursor:pointer; z-index: 101; font-size:20px; color:grey; font-weight: bold; background:transparent;} 
.tabmeni:hover { color: white; font-weight: bold; } 

.mmm{ position:absolute; opacity: 1; padding:15px 15px 15px 15px; background:white; color:grey; top:50; border: 5px solid grey;}
 
.med{ z-index: 1010;  position:absolute; opacity: 1; border-radius:10px 10px 10px 10px; padding:0px; width:90%; height:90%; background:black; color:white; left:5%; top:5%; border: 5px solid white;
  transition-property: display;
  transition-duration: 5s;
  transition-delay: 2s; }

.zastor{ position:absolute; z-index: 1009; opacity: 0.5; padding:0px; background:black; color:grey; top:0; left:0; width:100%; height:100%; border: 1px solid grey;}

.menu{ position:absolute; z-index: 1009; opacity: 1; padding:0px; background:white; color:black; border: 1px solid grey;}


h2 {
  border-bottom: 2px solid #1e90ff;
}
button {
  background-color: #ffffff;
 
  color: var(--color1);
  border: 1px solid #1e90ff;
  padding: 5px;
}
/* Style the tab */
.tab {
  overflow: hidden;
  border: 0px solid #ccc;
  background-color:  var(--tab_back2);
  padding:5px 5px 5px 5px; 
}
.tab2 {
  overflow: hidden;
  border: 0px solid #ccc;
  background-color:  var(--tab_back2);
  padding:5px 5px 5px 5px;
  opacity: 0.7; 
}
/**/
.material-symbols-outlined{
    font-size: 68px;
}

.meni_mali button {
  background-color: inherit;
  color: var(--color);
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 5px 5px 5px 5px;
  transition: 0.9s;
  //font-size:50px; 
  /**/
  text-align:center;
}
.meni_mali button:hover {

  color: rgba(var(--tab_back2), 0.1);
  font-size:30px;

  
}

.dugme {
  background-color: transparent;
  color: var(--color);
  
  border: 0px solid green;
 
  cursor: pointer;
  //padding: 15px 15px 15px 15px;
  transition: 0.5s;
  font-size:25px; 
  border-radius:10px 10px 10px 10px; 
  text-align:center;
}
.dugme:hover {

  color: white;
  font-size:30px;
  font-weight: bold;
  
}


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

/* Change background color of buttons on hover */
.tab button:hover {
  /* background-color: #ddd;   
  border-bottom: 2px solid white;*/
  color: rgba(var(--tab_back2), 0.1);
  //font-size:50px;
 /* color: rgba(blue, 0.1);*/
  
}

/* Create an active/current tablink class 
.tab button.active {
  background-color: var(--back2);
  
}*/

/* Style the tab content 
 padding: 6px 12px;background:black; width 1s;

*/
.meni_mali{ z-index: 500; padding: 2px; border: 0px solid green; float:left ; width:50px; height:99%; background:grey; overflow:auto; opacity:0.7;
} 
.tabcontent {
  display: block; float: right; overflow:auto; padding: 0px; margin:0px; 
  border: 0px solid green; transition: 0.3s; 
}

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

.tableft2{ padding: 2px; border: 0x solid green; float:left ; width:184px; background:var(--tab_back2); overflow:auto; opacity:0.7;
} 

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

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:20px;
}

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

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


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

@media screen and (max-width: 600px) {
	.tableft33{ padding: 2px;
	border: 0x solid green; float:left ; width:323px; background:var(--back2); overflow:auto;
	} 
	.user{  font-size:12px; color:white;  }
	.user_dr{  font-size:12px; color:var(--color2);  }
	
	.tableft2{ width:323px; }
}

.tooltipD {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
  cursor:pointer;
}
.tooltipD:hover  {
 color:#0066ff !important; border: 1px !important; 
}

.tooltipD .tooltiptext {
  visibility: hidden;
  width: 150px;
  background-color: grey;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  font-size:15px;
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  top: 37px;
  left: 10%;
}

.tooltipD:hover .tooltiptext {
  visibility: visible;
}

.tooltip1 {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
  cursor:pointer;
}
.tooltip1:hover  {
 color:#0066ff !important; border: 1px !important; 
}

.tooltip1 .tooltiptext {
  visibility: hidden;
  width: 150px;
  background-color: grey;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  font-size:15px;
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  top: 10px;
  left: 102%;
}

.tooltip1:hover .tooltiptext {
  visibility: visible;
}

.tooltip2:hover .tooltiptext {
  visibility: visible;
}
.tooltip2 {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
  cursor:pointer;
}
.tooltip2 .tooltiptext {
  visibility: hidden;
  width: 150px;
  background-color: grey;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  font-size:15px;
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  top: 50px;
  left: -202%;
}

/* TABLE  */

.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;}

#customers {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
  
}

#customers td, #customers th {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: center;
}

#customers tr:nth-child(even){background-color: #f2f2f2;}

#customers tr:hover {background-color: #ddd;}

#customers th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: center;
  background-color: #04AA6D;
  color: white;
}