/*------------------------ custom  overrides styles ----------------------*/

/* --------- FONTS ---------*/
	@font-face { font-family: bebas; src: url('../../includes/fonts/bebas.ttf');}
	@font-face { font-family: bebasneuebold; src: url('../../includes/fonts/bebasneuebold.otf');}
	@font-face { font-family: bebasneueregular; src: url('../../includes/fonts/bebasneueregular.otf');}

/* --------- BASIC ---------*/
html { margin: 0px; padding: 0px; }
.hide{display:none;}

/* --------- BUTTONS ---------*/
.btn { width: auto; height: auto; font-size: 14px; line-height: 1.5; padding: 5px; margin: 0.1rem}
.btn-icon { width: 30px; height: 30px; padding: 0px; margin:0.1rem;}
.btn-email { font-size: 12px;border: 1px solid <?php echo $site_color_box;?>; color: <?php echo $site_color_box;?>; background-color: <?php echo $site_color_background;?>; font-weight: 400;}
.btn-email:hover{border: 1px solid <?php echo $site_color_background;?>; color: <?php echo $site_color_background;?>; background-color: <?php echo $site_color_box;?>; }
.btn-phone { font-size: 12px;  border: 1px solid limegreen; color: limegreen; background-color: white; font-weight: 400;}
.btn-phone:hover{border: 1px solid white; color: white; background-color: limegreen;}



/* SELECT OPTION */

/* input.select-dropdown[readonly="true"] {
	font-size: .9rem;
	color: rgb(109, 110, 101);

	} */
.input-select-dropdown {
    height: calc(1.5em + .75rem + 2px);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
    /* color: #495057; */
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s
}

/* --------- OBRASCI ---------*/
	.obrazac th,.obrazac td {

		padding: 2px 2px;
		font-size: 14px;
		border: 1px solid black;
		overflow: hidden;
		box-sizing: border-box;
	}
	.obrazac th {	font-weight: 800; vertical-align: bottom;  }
	.obrazac td { 	font-weight: 300; vertical-align: top;  }
	.obrazac_header th {

		padding: 2px 2px;
		font-size: 14px;
		font-weight: 300;
		border: 0px solid black;
		overflow: hidden;
		box-sizing: border-box;
	}
	.obrazac_blank_row
{
    height: 20px !important; /* overwrites any other rules */
}


.select2-container {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}


.rpt_blagajna_stavke_elements {
	border: 2px solid black;
	height: 10em;
	border-right: none;
}

@media print {
    .pagebreak_obrazac_6 { 
		clear: both;
        page-break-after: always; }
}


/* --------- TABLES ---------*/



	.tabela th,.tabela td {

		padding: 2px 2px;
		font-size: var(--font_size_table,10px);
		font-weight: 300;
		border-bottom: 1px solid #dee2e6;
		overflow: hidden;
		box-sizing: border-box;
	}
	.tabela th { 	vertical-align: bottom; color:var(--table_color_header_font); background-color: var(--table_color_header_background); }
	.tabela td { 	vertical-align: top; color:var(--table_color_font); }

	/* #column_th { 	color:var(--table_color_header_font); background-color: var(--table_color_header_background); } */

	/* .activate{
		background: url('../../pictures/background.png') no-repeat right;
		padding: 2px;
	} */

	/* custom for DataTables MDBootsrap */


/* --------- forms & inputs---------*/

form {width: auto;	margin: 0px auto; padding: 10px; border: 0px solid #B0C4DE;background: white; border-radius: 5px;}
/* input[type=checkbox]	{width: 20px; height: 20px; max-width: 100%; padding: 0px 2px; border-radius: 4px; cursor: pointer; box-sizing: border-box; font-size: 12px; vertical-align:middle;} */

.form-check-input[type="checkbox"]+label:before, .form-check-input[type="checkbox"]:not(.filled-in)+label:after, label.btn input[type="checkbox"]+label:before, label.btn input[type="checkbox"]:not(.filled-in)+label:after {
    position: absolute;
    top: 0;
    left: -6;
    z-index: 0;
    width: 26px;
    height: 26px;
    margin-top: 0px;
    content: "";
    /* border: 2px solid #4285f4; */
    border-radius: 1px;
}


/* disabled select to be more visible */
select:disabled {
	color: #000000 !important;
}
/* negative numbers fields*/
	.negative_value {
		background-color: var(--input_color_negative_field);
	}



/* --------- titles ---------*/

.title-big { font-family: 'bebasneuebold'; display: inline-block; text-align: center; vertical-align: bottom; /*overflow: hidden;*/ font-size: 36px; font-weight: normal; color: var(--title_color_font); line-height: 38px; }

/* --------- inputs ---------*/
/* input[type=text], optgroup{
	width:100%;
	padding: 0px 2px;
	margin: 0px 0px 0px -2px;
	cursor: pointer;
	box-sizing: border-box;
	font-size: var(--font_size_table,10px) ;
} */
/* optgroup	{min-width: 3%; max-width: 100%; padding: 0px 2px; margin: 0px 0px 0px -2px;  cursor: pointer; box-sizing: border-box; font-size: var(--font_size_table,10px) ;} */
.input-control {
    display: block;
    width: 100%;
    height: calc(1.5em + .75rem + 2px);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
    /* color: #495057; */
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s
}
.input-select {
    height: calc(1.5em + .75rem + 2px);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
    /* color: #495057; */
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s;
}

@media print{

	/*REPORT FOR IOS START*/
	.signature{
		width: 45% !important;
	}

	.molba {
		width: 100% !important;
		margin-left: none !important;
	}

	.duznik {
		width: 90% !important;
	}
	
	.lines {
		width: 85% !important;
		margin-left: none !important;
	}
	/*REPORT FOR IOS END*/

}

.select2-selection__rendered {
	padding-right: 2px !important;
}

/* --------- custom ---------*/

.no-sort::after { display: none!important; }

.no-sort {
    pointer-events: none !important;
    cursor: default !important;
}

/* --------- GRID ---------*/
.grid {
	/* display: grid | inline-grid; */
	display: grid;
	/* grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); */
	grid-template-columns: repeat(5, 1fr);
	grid-gap: 0.1rem;

	justify-content: end;

  }
  .grid > div {
	background: #EDE7F6;
	padding: 0.5rem;
	border-radius: 0.3rem;
  }


/*from style markup and before here are checked styles.
after this point till /style everthying has to be chekced*/


/*-------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------*/

    /* snimi sve dugme */
    .snimiSveButton {
		text-align: center;
	}

	/* showing x out of y records styling */
	.showingRecords {
		color: #868e96;
		padding-left: 6px;
		font-size: 12px;
	}
		/* Pagination */
	.pagination {
		margin-bottom: 0;
	}
	.pagination .page-item .navigation {
		font-size: 13px;
		font-weight: bold;
		color: #216ce9;
		border: 3px solid #216ae900;
		border-radius: 10px;
	}
	.pagination .page-item .arrow:hover{
		border: 3px solid #4a84e985;
		border-radius: 10px;
		/* background: none; */
	}
	.pagination .page-item.disabled .page-link {
		font-size: 12px;
	}
	.pagination .page-item.active .page-link {
		font-size: 12px;
	}



	/*	osnovni */

	body { margin: 0px; padding: 0px; font-family: 'Open Sans', sans-serif; font-size: 12px; font-weight: 400; color: var(--site_color_background); background-color: var(--site_color_background); background: url(../../pictures/background.png);}

	h1 { font-weight: 300; margin: 50px 40px 30px 40px; font-size: 36px; text-align: center; color: #044e8e; }
	h2 { font-weight: normal; margin: 30px 40px 20px 40px; font-size: 28px; text-align: left; color: #044e8e; }
	h3 { font-weight: normal; margin: 30px 40px 20px 40px; font-size: 12px; text-align: left; color: #000000; }
	h4 { font-weight: normal; margin: 0px 40px 20px 40px; font-size: 30px; text-align: center; color: #000000; }
	p { margin: 0px 40px 20px 40px; }
	b { font-weight: 600; }
	img { border: 0px none;   display: block;  margin-left: auto;  margin-right: auto; }
	/* li { padding-bottom: 10px; margin-left: 30px; text-align: left; } */
/*	linkovi */
	a:link {  text-decoration: none; font-weight: normal; }
	a:visited { text-decoration:none;  font-weight: normal; }
	a:hover { background-color: <?php echo $link_color_background_hover;?>;color: <?php echo $link_color_font_hover;?>; text-decoration: none; font-weight: normal; }
	a:active {background-color: <?php echo $link_color_font_hover;?>; color: <?php echo $link_color_background_hover;?>; text-decoration:none; font-weight: normal;}


/*	boksovi */
	#header-content { margin: 10px auto 0px auto; width: 100%; padding: 20px 10px 0px 10px; background-color: <?php echo $site_color_box;?>;}
	#page-content { margin: 0px auto 0px auto; width: 100%; padding: 0px;  }
/*	#page-content { margin: 0px auto 0px auto; width: 90%; padding: 10px 10px 0px 10px; background-color: <?php echo $site_color_box;?>; }*/


	/*  search and add bar	*/
	.input-search { border: 1px solid <?php echo $bar_search_color_border;?>; color: <?php echo $bar_search_color_font;?>; background-color: <?php echo $bar_search_color_background;?>; font-weight: 400;}
	.input-add { padding: 0px 2px;font-size: 12px;border: 1px solid <?php echo $bar_add_color_border;?>; color: <?php echo $bar_add_color_font;?>; background-color: <?php echo $bar_add_color_background;?>; font-weight: 400;}
	.input-update { padding: 0px 2px;font-size: 12px;border: 1px solid <?php echo $bar_update_color_border;?>; color: <?php echo $bar_update_color_font;?>; background-color: <?php echo $bar_update_color_background;?>; font-weight: 400;}


/*  buttons	*/
	.btn-cancel {display: table-cell;  color: <?php echo $button_color_cancel_font;?>;}
	.btn-cancel:hover{background-color: <?php echo $button_color_cancel_background_hover;?>;}
	.btn-login { padding: 5px 20px;font-weight: 600; color: <?php echo $log_button_color_font;?>; background-color: <?php echo $log_button_color_background;?>; }
	.btn-upload { padding: 0px 0px; border: 0px; left: 0; position: relative;  overflow: hidden;  display: inline-block;}
	.btn-upload input[type=file] {  font-size: 100px;  position: absolute;  left: 0;  top: 0;  opacity: 0;}
	.form-upload {padding: 0px 0px; border: 0px; left: 0; }
	.refresh_button{position: absolute; left: 28px; top: 90px; font-size: 18px; padding: 4px; background: #550a21; border: 2px solid white;color: white;border-radius: 4px;}
	.refresh_button:hover{box-shadow: 0 5px 11px 0 rgba(248, 248, 248, 0.157), 0 4px 15px 0 rgba(226, 216, 216, 0.18);}

	.show_hide_filter_button{font-size: 18px; padding: 4px; margin-left:10px; background: #550a21; border: 2px solid white;color: white;border-radius: 4px;}
	.show_hide_filter_button:hover{box-shadow: 0 5px 11px 0 rgba(248, 248, 248, 0.157), 0 4px 15px 0 rgba(226, 216, 216, 0.18); color: white}

	.show_hide_new_record_button{font-size: 18px; padding: 4px; margin-left:10px; background: #550a21; border: 2px solid white;color: white;border-radius: 4px;}
	.show_hide_new_record_button:hover{box-shadow: 0 5px 11px 0 rgba(248, 248, 248, 0.157), 0 4px 15px 0 rgba(226, 216, 216, 0.18); color: white}

	.btn-addedit {color: #FF7100; background-color: #252b61; border-color:#FF7100; font-weight: 400;}
	.btn-delete { padding: 0px 2px;font-size: 12px;border: 1px solid <?php echo $button_color_delete_border;?>; color: <?php echo $button_color_delete_font;?>; background-color: <?php echo $button_color_delete_background;?>; font-weight: 400;}
	.form-attach {padding: 0px 0px; border: 0px; left: 0; position: relative; overflow: hidden;}
	.form-attach input[type=file] {font-size: 100px;  position: absolute;  left: 0;  top: 0;  opacity: 0;}
	.btn-attach-upload { font-size: 12px;border: 1px solid <?php echo $button_color_attach_upload_border;?>; color: <?php echo $button_color_attach_upload_font;?>; background-color: <?php echo $button_color_attach_upload_background;?>; font-weight: 400;}
	.btn-attach-view { font-size: 12px;border: 1px solid <?php echo $button_color_attach_view_border;?>; color: <?php echo $button_color_attach_view_font;?>; background-color: <?php echo $button_color_attach_view_background;?>; font-weight: 400;}
	button:disabled{color: gray!important; border: 2px solid gray!important;}

	#superscript .p1[data-count]:after{position:absolute;right:100%;top:10%;content: attr(data-count);font-size:40%;padding:.2em;border-radius:50%;line-height:1.5em; background:none;text-align:center; min-width: 1em; }
	.fa-stack {display: unset;} /* da nije u block


/*popover start*/
	.popover-body {
		color: #721c24;
	}
/*popover end*/

/* custom select start */
.select2-container--default .select2-selection--single .select2-selection__rendered {
	font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: var(--font_size_table,10px);
	color: #000 !important;
 }
.select2-container .select2-selection--single {
	height: 31px !important;
}
 .select2-container--default .select2-selection--single .select2-selection__arrow b  {
	border-color: #000 transparent transparent transparent !important;
 }

 .select2-selection__rendered{
	word-wrap: break-word !important;
	text-overflow: inherit !important;
	white-space: normal !important;
  }

/* custom select end */


/*	polja za forme */

 	input[type=date], input[type=month], input[type=time], input[type=password], input[type=progress], input[type=calculated],input[type=currency]	{ max-width: 100%; padding: 0px 2px; margin: 0px 0px 0px -2px; border-radius: 4px; cursor: pointer; box-sizing: border-box; font-size: 12px;}
 	/* input[type=text] { min-width: fit-content;} */

	input[type=submit] { width: auto; background-color: #252b61; color: white; padding: 0px 2px; margin: 0px 0px 0px -2px; border: 1px solid #252b61; border-radius: 4px; cursor: pointer; font-size: 12px; line-height: 1;}

	input[type=submit]:hover { background-color: #FF7100;}

	.form-group {margin: 2px 0; }
	.forma_print_button {border: 0px; margin: 5px auto; padding: 0px 0px; text-align: center; font-family: 'bebasneuebold'; font-size: 28px; }
	.datepicker {padding: 0px 0px;}
	.hide-calendar .ui-datepicker-calendar{	display: none;}
/* UPLOAD FILE */

	.fa {font-size: 14px;}

	/* SELECT ADD MODAL START */
	#model-popup table .btn  {
		min-width: 5px !important;
		min-height: 5px !important;
	}

	#model-popup-div-third table .btn  {
		min-width: 5px !important;
		min-height: 5px !important;
	}

	.select_modal_body {
		overflow: auto;
	}
	/* Model-Reports PRINT BUTTON */
	.no-print form{
		background: unset;
		text-align: left;
	}
	.no-print form i{
		font-size: 24px!important;
		padding: 5px;
		cursor: pointer;
		border-radius: 0.125rem;
		margin-top: 10px;
	}
	.no-print form i:hover{
		box-shadow: 0 5px 11px 0 rgb(0 0 0 / 18%), 0 4px 15px 0 rgb(0 0 0 / 15%);
	}

	@media only screen and (max-width: 1700px) {
		#model-popup-content {
			/* color: red !important; */
		  width: 1500px !important;
		  height: 90% !important;
		  overflow: hidden;
		}
	  }

	@media only screen and (max-width: 1500px) {
		#model-popup-content {
			/* color: red !important; */
		  width: 1400px !important;
		  height: 90% !important;
		}
	  }

	/* SELECT ADD MODAL END */

/*	CHECKBOX*/
	label {margin-bottom:0.3rem;}
	.big-checkbox {width: 30px; height: 30px;}
/* MODAL */
	.modal-confirm {
		color: #636363;
		width: 400px;
	}
	.modal-confirm .modal-content {
		padding: 20px;
		border-radius: 5px;
		border: none;
		text-align: center;
		font-size: 14px;
	}
	.modal-confirm .modal-header {
		border-bottom: none;
		position: relative;
	}
	.modal-confirm h4 {
		text-align: center;
		font-size: 26px;
		margin: 30px 0 -10px;
	}
	.modal-confirm .close {
		position: absolute;
		top: -5px;
		right: -2px;
	}
	.modal-confirm .modal-body {
		color: #999;
	}
	.modal-confirm .modal-footer {
		border: none;
		text-align: center;
		border-radius: 5px;
		font-size: 13px;
		padding: 10px 15px 25px;
	}
	.modal-confirm .modal-footer a {
		color: #999;
	}
	.modal-confirm .icon-box {
		width: 80px;
		height: 80px;
		margin: 0 auto;
		border-radius: 50%;
		z-index: 9;
		text-align: center;
		border: 3px solid #f15e5e;
	}
	.modal-confirm .icon-box i {
		color: #f15e5e;
		font-size: 46px;
		display: inline-block;
		margin-top: 13px;
	}
	.modal-confirm .btn, .modal-confirm .btn:active {
		color: #fff;
		border-radius: 4px;
		background: #60c7c1;
		text-decoration: none;
		transition: all 0.4s;
		line-height: normal;
		min-width: 120px;
		border: none;
		min-height: 40px;
		border-radius: 3px;
		margin: 0 5px;
	}
	.modal-confirm .btn-secondary {
		background: #c1c1c1;
	}
	.modal-confirm .btn-secondary:hover, .modal-confirm .btn-secondary:focus {
		background: #a8a8a8;
	}
	.modal-confirm .btn-danger {
		background: #f15e5e;
	}
	.modal-confirm .btn-danger:hover, .modal-confirm .btn-danger:focus {
		background: #ee3535;
	}
/* -------------------- LOGIN SYSTEM --------------------------*/

	.content {width: auto;	margin: 0px auto;padding: 20px;	border: 1px solid #B0C4DE;background: white;border-radius: 0px 0px 10px 10px;}
	.input-group {margin: 10px 0px 10px 0px;}
	.input-group label {display: block;	text-align: left;margin: 3px;}
	.input-group input {height: 30px;width: 93%;padding: 5px 10px;font-size: 16px;border-radius: 5px;border: 1px solid gray;}
	.input-group select {height: 30px;width: 93%;padding: 5px 10px;font-size: 16px;border-radius: 5px;border: 1px solid gray;}
/*	#user_type {height: 40px;width: 98%;padding: 5px 10px;background: white;font-size: 16px;border-radius: 5px;border: 1px solid gray;}*/
	.error {width: 100%; margin: 0px auto; padding: 10px; border: 1px solid #a94442; color: #a94442;background: #f2dede; border-radius: 5px; text-align: left;}
/*		.success {color: #3c763d; background: #dff0d8; border: 1px solid #3c763d;margin-bottom: 20px;}*/
	.profile_info img {display: inline-block; width: 50px; height: 50px; margin: 5px;float: left;}
	.profile_info div {display: inline-block; margin: 5px;}
	.profile_info:after {content: "";display: block;clear: both;}


/*	-------------------- TABELE --------------------*/

	/*flex buttons*/
		.flex-buttons {
			display: flex;
			flex-wrap: wrap;
		}

	/*proba flexa*/
		.flex {
			display: flex;
		}
		.no-wrap {
			flex-wrap: no-wrap;
		}
		.wrap {
			flex-wrap: wrap;
		}


		/* --- For resports --- */
		.table-striped tbody tr:nth-of-type(odd) {
			background-color: transparent !important;
		}
		

/* CHECKBOX POSITION FIXING */

		.form-check{
			position: relative;
			display:flex;
			justify-content: center;
		}
		/* TABLE FOOTER  */
		/* #footer-table{
			display: flex;
			flex-direction: column;
			flex-wrap: nowrap;
		} */
		/* useful when adding more rows or columns */
		/* .footer-rows {
			margin: 4px;
		  } */

		  
/* MESSAGE CONTENT MODAL */
		#messageContent{
			position:fixed;
			top:0;
			right:0;
			width: 100%;
			z-index:10;
		}
		#messageText {
			display: flex;
			justify-content: space-between;
			align-items: start;
    		width: 90%;
			margin-top: 22px;
			left: 5%;
			/* border: 1px solid #155724; */
			/* background: #1D8100; */
			color: white;
		}

		.alert-success{
			border: 1px solid #155724;
			background: #1D8100;
		}

		.confirmText{
			display: flex;
			gap: 5px;
			font-size: 18px;
		}

		.confirmText .fa-regular {
			font-size: 22px;
		}
		/* .modal-headers{
			position: absolute;
			float: right;
    		top: 0;
    		min-width: -webkit-fill-available;
    		right: 0;
    		padding: 1.3rem 1.25rem;
			background: #155724;
		} */

		.alert-dismissible .close{
			position: relative !important;
			padding: 0 !important;
		}
		#messageContent .close {
			color: white;
			opacity: 1;
			opacity: 0.8;
			font-family: 'Font Awesome 5 Free';
			font-size: 20px;
		}

		#messageContent .close:hover{
			cursor: pointer;
		}

		.alert-danger{
			background-color: #721c24!important;
			border: 1px solid #721c24!important;
		}

		/* #messageContent .alert-danger{
			border: 1px solid #721c24!important;
		}
		.alert-danger .modal-headers{
			position: absolute;
    		top: 0;
    		min-width: -webkit-fill-available;
    		right: 0;
    		padding: 1.3rem 1.25rem;
			background: #721c24;
		} */


		.alert-primary{
			background-color: #004085!important;
			border: 1px solid #004085!important;
		} 

		/* #messageContent .alert-primary{
			border: 1px solid #004085!important;
		}
		.alert-primary .modal-headers{
			position: absolute;
    		top: 0;
    		min-width: -webkit-fill-available;
    		right: 0;
    		padding: 1.3rem 1.25rem;
			background: #004085;
		} */
		
		.alert-warning{
			background-color: #856404!important;
			border: 1px solid #856404!important;
		} 
		/* #messageContent .alert-warning{
			border: 1px solid #856404;
		}
		.alert-warning .modal-headers{
			position: absolute;
    		top: 0;
    		min-width: -webkit-fill-available;
    		right: 0;
    		padding: 1.3rem 1.25rem;
			background-color: #856404;
		} */
		.modal-backdrop {
			background-color: transparent;
		 }

		#send_report_form{
			border: 1px solid #550a21;
		}

		#table-report .row{
			margin-bottom: 3px;
			/* padding: 4px; */
		}
		#report_select_values {
			margin-top: 15px;
		}
		#report_select_values .row {
			margin-left: auto;
			align-items: baseline;
		}
		#report_select_values .row div{
			margin-bottom: 5px;
			padding: 2 0px;
		}
		#report_select_values .row i{
			color: #ff3547;
			padding: 6px;
			border: 2px solid #ff3547;
			cursor: pointer;
			margin-right: 5px;
		}
		.container .row{
			align-items: center;

		}
		#table-report .select2-container{
			margin-bottom: 4px;
		}
		#table-report .row .datum{
			margin-left: -20px;
		}

		#table-report .container{
			margin-left: unset;
			background: #e8e8e8;
			border-radius: 6px;
		}
		.toggle-help{
			cursor: pointer;
			position: relative;
			float: right;
			font-size: 16px;
			color: #ffefc7;
		}
		.toggle-help:hover{
			transform: scale(1.5);
			transform: rotateX(44);
		}

		#report_konto_div .col-sm{
			padding-left: unset;
		}
		#reports_type_div{
			padding-top: 5px;
		}

		/* OKS: USER */
		/* Position of the div for user */
		.footer-position-usertype{
			width: 100vw;
			display: flex;
			justify-content: center;
			align-items: center;
			position: fixed;
			bottom: 0;
			z-index: 100;
			margin-top: 10px;
			margin-bottom: unset;
		}
		/* main div for all elements insdie */
		.sticky-footer{
			width: 70%;
			display: flex;
			justify-content: space-around;
			gap: 10%;
			align-items: center;
			color: white;
			background: var(--site_global_backgrounds);
			padding: 1px;
			margin-bottom: unset;
			border-top-right-radius: 8px;
			border-top-left-radius: 8px;
			/* filter: drop-shadow(0 -1mm 1mm var(--site_global_backgrounds)); */
			filter: drop-shadow(4px -1px 3px var(--site_global_backgrounds));
		}

		/* LOGO ACME*/
		.sticky-footer .sticky-acme-logo{
			margin-left: 20px;
			padding: 2px 2px;
			border-radius:7px;
			box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.3);
		}
		.sticky-footer .sticky-acme-logo img{
			display: block;
			width: 20px;
			height: 20px;
			margin: 0 10px;
		}
		/* ---end of LOGO ACME--- */

		/* ----START APP--- */
		.sticky-footer .sticky-app{
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.sticky-app .app-logo img{
			width: 25px !important;
			height:25px !important;
			margin: 0 10px;
		}
		/* --end of APP --- */



		/*------ start - TENENTS---- */
		.sticky-footer .sticky-institutionAll{
			display: flex;
			justify-content: center;
			align-items: center;
			gap: 5px;
		}

		.sticky-institution{
			display: flex;
			justify-content: center;
			align-items: center;
		}
		/*------ END - TENENTS---- */


		/* ----START - USER */
		.sticky-footer .institution-username{
			display: flex;
			/* flex-direction: column; */
			justify-content: center;
			align-items: center;
			gap: 5px;
		}

		/* icon for user */
		.footer-icon-institution, .footer-icon-username{
			font-size: 12px;
			padding: 5px 5px;
			background-color: #690a0a;
			border-radius: 20px;
		}
		.footer-icon-institution i, .footer-icon-username i{
			margin: 2px 2px;
		}

		/* app name, instituion name, username */
		.app-name, .institution-name, .username{
			font-size: 10px;
			white-space: nowrap;
		}

		.app-name, .institution-name, .username a{
			color: inherit;
			text-decoration: none;
		}

		.footer-option-features{
			position: relative;
			top:0px;
			display:flex;
			gap:15px;
			padding: 0px 5px;
			align-items: center;
		}

		.feature-day-night, .feature-share{
			padding: 10px;
			background-color: #690a0a;
			border-radius: 10px;
			transition: 0.4s ease-in;
		}

		.feature-day-night:hover, .feature-share:hover{
			cursor: pointer;
			background-color: white;
			color: #550a21;
		}

		#url-text{
			display: none;
			position: fixed;
			top: -30px;
			right: 38px;
			font-size: 11px;
			background-color: var(--bar_add_color_font);
			padding: 5px 15px;
			border-radius:10px;
		}


		/* ------end of USER !-------- */

		/*  LOGOUT BUTTON*/
		.sticky-button-logout{
			margin-left: auto !important;
			margin-right: 15px;
			
			
		}
		.sticky-button-logout a{
			display: flex;
			text-decoration: none;
			color: whitesmoke;
			padding: 2px 0;

		}
		.sticky-footer .sticky-button-logout a button {
			text-align: center;
			border-radius: 5px;
			background: var(--site_global_backgrounds);
			box-shadow: 0px 0px 2px 3px rgba(255,255,255,0.3);
		}

		.sticky-footer .sticky-button-logout a button:hover{
			background-color: whitesmoke;
		}

		.sticky-footer .sticky-button-logout a button i {
			padding-left: 5px;
			padding-right: 5px;
		}

		.sticky-footer .sticky-button-logout a button i:hover{
			color: var(--site_color_background);
		}
		/* BEGIN DUGME U FILTERU */
		.filter-begin{
			border: 1px solid #550a21;
			color: #550a21;
			border-radius: 5px;
			top: 4px;
			right: 22px;
			position: absolute;
			font-size: 8px;
		}
		.filter-begin:focus{
			color: white;
			background-color: #550a21;
		}
		/*FILTER ARROWS */
		.fa-angle-up{
			position: absolute; 
			top: 3px; 
			right: 7px;
			border: unset;
			padding: unset;
			color: gray;
			background: unset;
		}
		.fa-angle-down{
			position: absolute; 
			bottom: 3px; 
			right: 7px;
			border: unset;
			padding: unset;
			color: gray;
			background: unset;
		}
		.fa-angle-up:hover, .fa-angle-up:focus,.fa-angle-down:hover,.fa-angle-down:focus{
			color: #550a21;
		}
/* POTPISI i LINIJE */

	.potvrdjuje, .potpis  { float: left; font-size: 12px; color:#252b61; font-weight: 400;}
	.potpis {  margin: 20px 10px; border-top: 1px solid #000; width: 200px;  text-align: center;}
	 .datum_potpisa > .linija, { display: inline-block;border-bottom: 1px solid #000; width: 100px;}
	.futer { float: left; font-size: 12px; color:#252b61; font-weight: 400; margin: 20px 10px; border-top: 1px solid #044e8e;	  width: 150%; text-align: center;}
	 .futer_tekst > .linija_futer,  {display: inline-block;	border-bottom: 1px solid #044e8e;width: 300px; }

/* NASLOVI, PODNASLOVI, ZAGLAVLJA */
	.zaglavlje { padding: 2px 4px; vertical-align: middle; font-size: 12px; color: #252b61; font-weight: bold;}
	.zaglavlje_srednje { padding: 2px 4px; text-align: center; vertical-align: middle; font-size: 18px; color: #252b61;}
	.zaglavlje_veliko { padding: 2px 4px; text-align: center; vertical-align: middle; font-size: 24px; color: #252b61; font-weight: bold;}
	.report_zaglavlje_veliko { font-family: 'bebasneuebold'; padding: 2px 4px; text-align: center; vertical-align: middle; font-size: 36px; color: #FF7100; font-weight: bold;}
	.report_zaglavlje_srednje { font-family: 'bebasneuebold'; padding: 2px 0px; text-align: left; vertical-align: middle; font-size: 28px; color: #FF7100; font-weight: bold;}
	.report_footer_polje { padding: 2px 0px 2px 0px; vertical-align: bottom;  font-weight: bold; background-color: #252b61; color:white; }
   	.naslov-veliki { font-family: 'bebasneuebold'; width: 100%; display: inline-block; text-align: center; vertical-align: bottom; overflow: hidden; font-size: 36px; font-weight: normal; color: var(--title_color_font); line-height: 38px; margin: 5px 10px 5px 10px; padding: 2px;}
	.naslov-srednji {font-family: 'bebasneuebold'; width: 100%; display: inline-block; text-align: left; vertical-align: bottom; overflow: hidden; font-size: 30px; font-weight: normal; color: var(--title_color_font); line-height: 32px; margin-top: 2px; padding: 0 5px;}
	.podnaslov-mali { font-family: 'bebasneuebold'; width: 80%; display: inline-block; text-align: left; vertical-align: bottom; overflow: hidden; font-size: 16px; font-weight: normal; color: var(--title_color_font); line-height: 16px; margin-top: 2px; padding: 0 5px;}
	.poruka-stil { overflow: hidden; font-size: 20px; font-weight: normal; line-height: 24px; }
/* RAZNO */
	.hide-on-screen {display:none;} /* ne prikazuje se */
	.big-icon {font-size: 32px;}


	::-webkit-input-placeholder {  color: #FF7100;  font-size: 12px;}
	::-moz-placeholder {  color: #FF7100;  font-size: 12px;}
	:-ms-input-placeholder {  color: #FF7100;  font-size: 12px;}
	::placeholder {  color: #FF7100;  font-size: 12px;}

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


/*----- RESPONSIVE--------------------------------------		*/
	@media screen and (max-width: 1020px) {
		#page-content { margin: 0px; width: auto; padding: 0px; }
		#header-content { margin: 0px; width: auto; padding: 0px;}
		#footer-content { margin: 0px; width: auto; padding: 0px; }
		#footer-position-user { position: sticky; bottom: 0;}
		.sticky-footer { margin: 0px; max-width:100vw; padding: 0px;  gap: 10px;}
		#headline ul li { width: 25%; line-height: 30px; }
		#headline ul li a.selected { line-height: 24px; }
		p { margin: 0px 20px 20px 20px; }
		.sticky-app{
			gap: 5px;
		}
	}

	@media screen and (max-width: 800px) {
		.popup {  margin: 70px auto;  padding: 0px; border-radius: 5px;  width: 60%;  position: relative;  transition: all 1s ease-in-out;}
		h1 { font-size: 28px; }
		h2 { font-size: 22px; }
		ul { margin-top: 0px; }
		form {
			margin: 0px auto;
			padding: 20px;
			border: 1px solid #B0C4DE;
			background: white;
			border-radius: 0px 0px 10px 10px;
		}
		.sticky-app, .sticky-institutionAll, .institution-username{
			flex-wrap: wrap;
			justify-self: center;
			align-items: center;
		}
		.sticky-footer{
			padding-top: 8px;
			gap: 5px;
		}
	 }

	 @media screen and (max-width: 700px){
		.sticky-acme-logo img{
			width: 30px !important;
			height: 30px !important;
		}
	 }

	@media screen and (max-width: 600px) {
		h1 { font-size: 22px; }
		h2 { font-size: 18px; }
		.sticky-footer{
			width: 500px;
		}
		.app-name, .institution-name, .username{
			font-size: 8px;
		}
	}

	@media screen and (max-width: 480px) {
		.popup {  margin: 30px 30px;  padding: 0px; border-radius: 5px;  width: 80%;  position: relative;  transition: all 1s ease-in-out;}
		#headline ul li { width: 50%; line-height: 20px; }
		#headline ul li a.selected { line-height: 14px; }
		.sticky-footer{
			justify-content: space-around !important;
		}
		.sticky-acme-logo{
			margin-left: 5px;
		}
		.sticky-button-logout{
			margin-right: 25px;
		}
	}

	@media screen and (max-width: 320px) {
		#headline ul li { width: 50%; line-height: 20px; }
		#headline ul li a.selected { line-height: 14px; }
		.sticky-footer{
			width: 350px;
		}
	}

	@media screen and (max-width: 240px) {
		#headline ul li { width: 100%; line-height: 20px; }
		#headline ul li a.selected { line-height: 14px; }
	}

	@media (max-width: 820px){
		#table-report .row .datum{
			margin-left: 0;
		}
		.print{
			text-align: -webkit-center;
		}
	}

/*----- RESPONSIVE KRAJ-----------------------------		*/





#footer-content { margin: 25px auto 40px auto; width: 90%; padding: 0px; font-size: 12px; line-height: 40px; color: var(--site_color_footer_font); text-align: center; }
#footer-content a { color: var(--link_color_background_hover); background: none;}
#footer-content a:hover {color: var(--link_color_font_hover); background-color: var(--link_color_background_hover);}

#footer-content .footer-div{
	display: flex;
	justify-content: center;
	align-items: center;
}

#footer-content .icon-link{
	margin-left: 3px;
	font-size: 20px;
	vertical-align: middle;
	color: var(--link_color_background_hover);
	padding: 5px;

}

#footer-content .icon-link:hover{
	background-color:var(--link_color_background_hover);
	color:#ebebeb;
	border-radius: 3px;
}


#footer-content .logo-div{
	display: flex;
	justify-content: center;
	align-items: center;

}

.logo-footer{
	width: 3%;
	min-width: 15%;
}

.main-kuca{
	position: absolute;
	display: flex;
	justify-content: flex-start;
	box-shadow: 0px 0px 5px 3px rgba(0,0,0,0.1);	
}
.show_hide_lupa_button{
	height: 30px;
	border: 2px solid #F1F1F1;
	color: #F1F1F1;
	border-radius: 0.2rem;
}
.show_hide_lupa_button:hover{
	box-shadow: 0 5px 11px 5 rgba(248, 248, 248, 0.157);
	color: white;
}
.button-modal{
	position: absolute;
	left: 35px;
	background-color: #F1F1F1;
	z-index:9999;
	box-shadow: 0px 0px 10px 7px rgb(120 120 120 / 80%);
	border-radius: 5px;
	padding: 1px;
}

.lupa_button_color{
	background-color: var(--site_color_background);
}


/* tabela Pomocno */

.naziv_tabele{
	font-size: 18px;
	text-align: start;
}

.iznosi_tabele{
	font-size: 20px;
	text-align: center;
	border: 2px solid var(--site_global_backgrounds);
	box-shadow: 0px 0px 5px 2px rgb(120 120 120 / 80%);

}

.procenat_class{
	font-size: 20px;
	text-align: center;
	border: 2px solid var(--site_global_backgrounds);
	box-shadow: 0px 0px 5px 2px rgb(120 120 120 / 80%);

}

.stampanje_button{
	padding: 10px;
	margin: 0 0 10px 10px;
	color: var(--site_global_backgrounds);
	background-color: white;
	border: 5px solid var(--site_global_backgrounds);
}

.stampanje_button:hover{
	box-shadow: 0px 0px 5px 2px rgb(120 120 120 / 80%);

}


/* OBRAZAC Tabela ======================== START */ 


.potpis-div{
	display: flex;
	flex-direction: column;
	gap: 20px;
	justify-content: center;
	text-align:center;
	height: 120px;
	vertical-align:bottom;
}
.potpis-div span{
	margin-left: 15px;
}


/* OBRAZAC Tabela ======================== END */ 

/* KUF MODALS CSS  START */
.item-label{
	display:flex; 
	gap:40px; 
	margin-bottom:10px;
	border-bottom: 1px solid;
	padding: 20px;
	padding-bottom: 2px!important;
}
.item-container{
	display:flex; 
	justify-content:center; 
	gap:40px; 
	margin-bottom:10px;
}

/* KUF MODAL CSS  START */


/* SPINNER STYLE START */
#spinner{
	display: none;
	position: absolute;
	left: 45%;
	right: 40%;
	top: 45%;
	width: 100px;
	height: 100px;
	z-index: 9;
}
.spinner-border{
	border: 1rem solid currentColor;
	border-right-color: transparent;
}

/* SPINNER STYLE END */

/*hide existing record on pop-up create new*/
#model-popup tbody[id$="-existingRecords"]{
display: none !important;
}