/*------------------------ 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 var(--site_color_box); color: var(--site_color_box); background-color: var(--site_global_backgrounds); font-weight: 400;}
.btn-email:hover{border: 1px solid var(--site_global_backgrounds); color: var(--site_global_backgrounds); background-color: var(--site_global_backgrounds); }
.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;}


/*--------- REPORTS ----------*/

/*Badges*/
.badge {
  display: inline-block;
  background: #c7c3c3;
  border-radius: 12px;
  padding: 4px 10px;	
  margin: 2px;
  font-size: 14px;
}
.badge .remove-x {
  margin-left: 8px;
  color: #201f1f;
  font-weight: bold;
  cursor: pointer;
}

.report-table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-family: 'Roboto', Arial, sans-serif;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.report-table th, .report-table td {
  border: 1px solid #e0e0e0;
  padding: 10px 16px;
  text-align: left;
}

.report-table th {
  background: #252b61;
  color: #fff;
  font-weight: 500;
  letter-spacing: 0.5px;
}

.report-table tr:nth-child(even) {
  background: #f7f8fa;
}

.report-table tr:hover {
  background: #e3e8f0;
}

/* Stilizacija div elementa sa klasom "prikaz_kolona" */
.prikaz_kolona, .oznacene_kolone {
	display: flex;
	align-items: center; /* Poravnava elemente vertikalno u sredinu */
	gap: 10px; /* Razmak između elemenata */
	font-family: Arial, sans-serif; /* Font za tekst */
	background-color: #f9f9f9; /* Svetla pozadina */
	padding: 15px; /* Padding oko sadržaja */
	border-radius: 8px; /* Zaobljeni ivice */
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Lagani senka efekat */
  }
  
  /* Stilizacija label elementa */
  .prikaz_kolona label {
	font-size: 14px; /* Veličina fonta */
	font-weight: bold; /* Podebljan tekst */
	color: #333; /* Tamnije sive boje */
  }
  
  /* Stilizacija select elementa */
  .prikaz_kolona select {
	padding: 8px; /* Padding unutar select-a */
	font-size: 14px; /* Veličina fonta */
	border: 1px solid #ccc; /* Siva ivica */
	border-radius: 4px; /* Zaobljene ivice */
	background-color: #fff; /* Bela pozadina */
	cursor: pointer; /* Menja kursor u "ruku" prilikom hover-a */
  }
  
  /* Stilizacija input tipa submit */
  .prikaz_kolona input[type="submit"] {
	padding: 8px 15px; /* Padding unutar dugmeta */
	font-size: 14px; /* Veličina fonta */
	color: #fff; /* Beli tekst */
	background-color: #007bff; /* Plava pozadina */
	border: none; /* Bez ivice */
	border-radius: 4px; /* Zaobljene ivice */
	cursor: pointer; /* Menja kursor u "ruku" prilikom hover-a */
	transition: background-color 0.3s ease; /* Efekat prelaza pri kliku */
  }
  
  /* Promena boje pozadine dugmeta prilikom hover-a */
  .prikaz_kolona input[type="submit"]:hover {
	background-color: #0056b3; /* Tamnija plava boja */
  }


  /* Stilizacija div elementa sa klasom "column-filter" */
.column-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	padding: 12px;
	background-color: #f8f9fa;
	border: 1px solid #ddd;
	border-radius: 10px;
	box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.05);
  }
  
  /* Stilizacija checkbox kolone */
  .checkbox_column {
	min-width: 200px;
	display: flex;
	align-items: center;
  }
  
  .checkbox_column label {
	font-size: 14px;
	font-weight: bold;
	color: #333;
	cursor: pointer;
  }
  
  /* Stilizacija dropdown kontejnera */
  .dropdown {
	position: relative;
	display: inline-block;
	font-family: Arial, sans-serif;
	min-width: 220px;
  }
  
  .dropdown-label {
	padding: 8px 12px;
	border: 1px solid #ccc;
	background-color: #f9f9f9;
	cursor: pointer;
	user-select: none;
	border-radius: 6px;
	box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.05);
	transition: background-color 0.2s ease, box-shadow 0.2s ease;
  }
  
  .dropdown-label:hover {
	background-color: #e9ecef;
	box-shadow: 0 0 5px rgba(0, 123, 255, 0.2);
  }
  
  /* Stilizacija dropdown liste */
  .dropdown-list {
	position: absolute;
	top: calc(100% + 5px);
	left: 0;
	background-color: white;
	border: 1px solid #ccc;
	padding: 10px;
	z-index: 1000;
	max-height: 200px;
	overflow-y: auto;
	width: 100%;
	border-radius: 6px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	display: none;
  }
  
  /* Stilizacija opcija u dropdown listi */
  .dropdown-option {
	display: flex;
	align-items: center;
	padding: 4px;
	margin-bottom: 4px;
	border-radius: 4px;
	transition: background-color 0.2s ease;
	cursor: pointer;
	font-size: 14px;
  }
  
  .dropdown-option:hover {
	background-color: #f1f1f1;
  }
  
  .dropdown-option input[type="checkbox"] {
	margin-right: 8px;
	cursor: pointer;
  }
  
  /* Stilizacija linka "Označi sve" */
  .dropdown-list a {
	display: block;
	margin-bottom: 5px;
	font-size: 14px;
	color: #007bff;
	text-decoration: none;
	cursor: pointer;
  }
  
  .dropdown-list a:hover {
	text-decoration: underline;
  }
  
  /* Stilizacija submit dugmeta */
  .prikaz_kolona input[type="submit"], .oznacene_kolone input[type="submit"] {
	padding: 8px 15px;
	font-size: 14px;
	color: #fff;
	background-color: #007bff;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	transition: background-color 0.3s ease;
  }
  
  input[type="submit"]:hover, .oznacene_kolone input[type="submit"]:hover {
	background-color: #0056b3;
  }





/********************************/
.display_none{
	display: none;
}

.input_mini_label_group {
    position: relative;
    display: inline-block;
}

.label-mini {
    position: absolute;
    top: 1;
    right: 1;
    background-color: var(--site_global_backgrounds);
	color: var(--site_global_text_on_backgrounds);
    padding: 2px 5px; 
    font-size: 9px; 
    border: 1px solid #ccc;
    border-radius: 4px;
    pointer-events: none; 
}
/* 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 */
}

/*

// POP*UP za dodavanje fajlova

/* Pop-up overlay */

#popupFileManagerModal.modal {
     display: flex !important;
    align-items: flex-start; /* Sa vrha */
    justify-content: center;
    background: rgba(0,0,0,0.35);
    position: fixed;
    z-index: 9999;
    left: 0; top: 0;
    width: 100vw; height: 100vh;
    animation: fadeIn 0.45s cubic-bezier(.4,0,.2,1);
    padding-top: 40px;
}

/* Pop-up content */
#popupFileManagerModal .modal-content {
    background: var(--site_color_box, #fff);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    padding: 32px 28px 24px 28px;
    width: 420px;
    max-width: 95vw;
    position: relative;
    animation: popIn 0.25s;
}

#popupFileManagerModal h4 {
    margin-top: 0;
    margin-bottom: 18px;
    font-size: 1.25rem;
    color: var(--title_color_font);
    font-weight: 600;
    letter-spacing: 0.5px;
    text-align: center;
}

#popupFileManagerModal ul#popup-file-list {
    list-style: none;
    padding: 0;
    margin: 0 0 18px 0;
    max-height: 220px;
    overflow-y: auto;
}

#popupFileManagerModal ul#popup-file-list li {
    background: #f8f9fa;
    border-radius: 6px;
    margin-bottom: 8px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background 0.15s;
}

#popupFileManagerModal ul#popup-file-list li:hover {
    background: #e9ecef;
}

#popupFileManagerModal ul#popup-file-list a {
     color: var(--site_global_backgrounds, #323F7F);
    text-decoration: none;
    font-weight: 500;
    word-break: break-all;
}

#popupFileManagerModal ul#popup-file-list a:hover {
    text-decoration: underline;
    color: var(--site_global_text_on_backgrounds, white);
    background: var(--site_global_backgrounds, #323F7F);
    border-radius: 3px;
    padding: 2px 4px;
}

#popupFileManagerModal .close {
    position: absolute;
    right: 16px;
    top: 12px;
    font-size: 1.5rem;
    color: #888;
    cursor: pointer;
    transition: color 0.2s;
}

#popupFileManagerModal .close:hover {
    color: #e74c3c;
}

#popupFileManagerModal form#popup-upload-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
}

#popupFileManagerModal form#popup-upload-form input[type="file"] {
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 6px;
    font-size: 0.98rem;
}

#popupFileManagerModal form#popup-upload-form button[type="submit"] {
    background: var(--site_global_backgrounds, #323F7F);
    color: var(--site_global_text_on_backgrounds, white);
    border: none;
    border-radius: 4px;
    padding: 7px 0;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.25s, color 0.25s;
}

#popupFileManagerModal form#popup-upload-form button[type="submit"]:hover {
    background: var(--site_global_text_on_backgrounds, white);
    color: var(--site_global_backgrounds, #323F7F);
    border: 1px solid var(--site_global_backgrounds, #323F7F);
}

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes popIn {
    from { transform: scale(0.93); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}


.sazetak-label {
  margin: 24px 0 8px 0;
  font-size: 20px;
  font-family: 'Roboto', Arial, sans-serif;
  font-weight: 600;
  color: #252b61;
  letter-spacing: 1px;
  background: #f7f8fa;
  padding: 8px 18px;
  border-radius: 6px 6px 0 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  display: inline-block;
}

/* --------- 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;
}

.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_font); 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; margin-left: 106px; margin-top: -63px; 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;
 }
/* 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*/

	/* .custom-checkbox {
    	/* position: 1  relative !important; */
    	/* z-index: 1 !important; */
    	/* opacity: 1 !important; */
	/* }  */

	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-footer .btn-success{
		background-color: var(--site_global_backgrounds) !important;
	}
	.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;
		}

/* CHECKBOX POSITION FIXING */

		.form-check{
			position: relative;
			display:flex;
			justify-content: center;
			margin: 3px 0px;
			justify-self: 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 {
    		width: 20%;
   			margin-left: auto;
			margin-top: 20px;
			right: 20px;
			padding: 3.75rem 1.25rem;
			border: 1px solid #155724;
		}
		.modal-headers{
			position: absolute;
			float: right;
    		top: 0;
    		min-width: -webkit-fill-available;
    		right: 0;
    		padding: 1.3rem 1.25rem;
			background: #155724;
		}
		#messageContent .close {
			color: white;
			opacity: 1;
		}
		#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;
		}
		#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;
		}
		#messageContent .alert-warning{
			border: 1px solid #856404!important;
		}
		.alert-warning .modal-headers{
			position: absolute;
    		top: 0;
    		min-width: -webkit-fill-available;
    		right: 0;
    		padding: 1.3rem 1.25rem;
			background: #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: #2c7c9a;
			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;
		}

		/* ------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_font);
		}


		/* 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;
		}

/* SPINNER STYLE START */
.spinner-container {
	display: none;
	z-index: 9998;
	position: fixed;
	top: 0;
	width: 100vw;
	height: 100vh;
	background-color: rgba(46 39 39 / 50%);
	justify-content: center;
	align-items: center;
}

.spinner-wrapper {
	background-color: whitesmoke;
	padding: 10px;
	border-radius: 10px;
}

#spinner{
	display: block;
	width: 100px;
	height: 100px;
	justify-self: center;
	margin-bottom: 15px;
}
.spinner-border{
	border: 1rem solid #181C14;
	border-right-color: transparent;
}

.spinner-text {
	color: #181C14;
	font-size: 20px;
	font-weight: 600;
	width: 200px;
	text-align: center;
}

.spinner-text p {
	margin: 0;
}
/* SPINNER STYLE END */

/* SLANJE OBAVJESTENJA */
.obavjestenja-info {
	margin-bottom: 30px; 
	padding: 20px; 
	border-radius: 8px; 
	box-shadow: 0 2px 6px rgba(0,0,0,0.05); 
	text-align: center;
}
.obavjestenja-info h5 {
	color: #252b61; 
	margin-bottom: 10px;
}
.obavjestenja-podaci {
	display: flex; 
	flex-wrap: wrap; 
	justify-content: center; 
	gap: 30px; 
	align-items: start; 
	margin-top: 15px;
}
.obavjestenje-naziv {
	flex: 1; 
	min-width: 200px;
}
.obavjestenje-naziv strong {
	color: #252b61; 
	font-size: 0.9rem;
}
.obavjestenje-naziv h4 {
	margin: 5px 0; 
	font-size: 1.25rem; 
	color: #212529;
}
.seminar-naziv {
	margin-bottom: 10px; 
	color: #252b61; 
	font-size: 1rem;
}
.filteri {
	display: flex; 
	gap: 10px; 
	margin-bottom: 10px; 
	margin-top: 20px; 
	justify-content: center; 
	align-items: center;
}

.filteri button {
	padding: 8px; 
	background: var(--site_global_backgrounds); 
	color: white;
	width: max-content;
}
#klijenti-table-container {
	padding-left: 20px; 
	padding-right: 20px;
}

/* COUNTER */
.countdown-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9999;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 20px;
}

.countdown-timer {
	max-width: 800px;
	width: 100%;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5) !important;
}

/* 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 {font-family: 'bebasneuebold'; overflow: hidden; font-size: 24px; font-weight: normal; line-height: 24px; }
	.naslov-desktop {
		display: block;
	}
	.naslov-mobile {
		display: none;
	}
	.header-buttons {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
/* RAZNO */
	.hide-on-screen {display:none;} /* ne prikazuje se */
	.big-icon {font-size: 32px;}


	::-webkit-input-placeholder {  color: #bbb;  font-size: 9px;}
	::-moz-placeholder {  color: #bbb;  font-size: 9px;}
	:-ms-input-placeholder {  color: #bbb;  font-size: 9px;}
	::placeholder {  color: #bbb;  font-size: 9px;}

	/* select2 placeholder specific class given */
	.select2-selection__placeholder {
		font-size: 9px !important;
		color: #bbb !important;
		margin-left: -3% !important;
	  }

      .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; }
		#details-support{width: auto !important;}
		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;
		}

	}

	@media screen and (max-width: 480px){
		.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: 5px auto 0px 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;
	margin-bottom: 35px;
	padding-bottom: 5px;
}
#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;
}


.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:1;
	box-shadow: 0px 0px 10px 7px rgb(120 120 120 / 80%);
	border-radius: 5px;
	padding: 1px;
}

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

/* Select2 styling improvements - Updated */
.select2-container--bootstrap-5 .select2-selection--single {
    height: 50px !important;
    border: 2px solid #ced4da !important;
    border-radius: 8px !important;
    font-size: 16px !important;
    display: flex !important;
    align-items: center !important;
}

.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
    line-height: normal !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    font-size: 16px !important;
    color: #495057;
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
    overflow: visible !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
}

.select2-container--bootstrap-5 .select2-selection--single .select2-selection__arrow {
    height: 46px !important;
    right: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

.select2-dropdown-large-font {
    font-size: 16px !important;
    z-index: 9999 !important;
}

.select2-dropdown-large-font .select2-results__option {
    padding: 12px !important;
    font-size: 16px !important;
    line-height: 1.4 !important;
    min-height: auto !important;
}

.select2-container--bootstrap-5.select2-container--focus .select2-selection--single {
    border-color: #007bff !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25) !important;
}

.select2-container--bootstrap-5 .select2-dropdown {
    border: 2px solid #ced4da !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
    z-index: 9999 !important;
}

.select2-container--bootstrap-5 .select2-search--dropdown .select2-search__field {
    border: 1px solid #ced4da !important;
    border-radius: 6px !important;
    padding: 8px 12px !important;
    font-size: 16px !important;
    height: auto !important;
}

/* Fix for dropdown positioning and text display */
.select2-container--bootstrap-5 .select2-results__option {
    padding: 8px 12px !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
    white-space: normal !important;
    word-wrap: break-word !important;
}

.select2-container--bootstrap-5 .select2-results__option strong {
    font-weight: 600 !important;
    display: block !important;
    margin-bottom: 2px !important;
}

.select2-container--bootstrap-5 .select2-results__option small {
    font-size: 14px !important;
    color: #6c757d !important;
    display: block !important;
}

/* Modal Select2 z-index fix */
#addPoziviModal .select2-container {
    z-index: 9999;
}

#addPoziviModal .select2-dropdown {
    z-index: 9999;
}

/* Ensure proper text rendering */
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__placeholder {
    color: #6c757d !important;
    font-size: 16px !important;
    line-height: normal !important;
}

/* Fix for selection text being cut off */
.select2-container .select2-selection--single .select2-selection__rendered {
    padding-right: 30px !important; /* Make room for arrow */
    max-width: calc(100% - 30px) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

#poziviModal .modal-body,
#addPoziviModal .modal-body {
  scrollbar-width: thick; /* Firefox */
  /* scrollbar-color: #007bff #e9ecef; */
}
#poziviModal .modal-body::-webkit-scrollbar,
#addPoziviModal .modal-body::-webkit-scrollbar {
  width: 14px;
  background: #e9ecef;
  border-radius: 10px;
}
#poziviModal .modal-body::-webkit-scrollbar-thumb,
#addPoziviModal .modal-body::-webkit-scrollbar-thumb {
  background: #007bff;
  border-radius: 10px;
}


@media (max-width: 768px) {
  #poziviModal .modal-body,
  #addPoziviModal .modal-body {
    scrollbar-width: thick !important; 
  }
  #poziviModal .modal-body::-webkit-scrollbar,
  #addPoziviModal .modal-body::-webkit-scrollbar {
    width: 20px !important;
    background: #e9ecef !important;
    border-radius: 16px !important;
  }
  #poziviModal .modal-body::-webkit-scrollbar-thumb,
  #addPoziviModal .modal-body::-webkit-scrollbar-thumb {
    background: #007bff !important;
    border-radius: 16px !important;
  }
}

#email-text-filter {
    background-color: white;
    border: 1px solid #aaa;
    border-radius: 4px;
    cursor: text;
    padding-bottom: 4px;
    padding-right: 4px;
    position: relative;
    height: 32px;
}

/* COUNTER PRIJE LOGOVANJA */

@media only screen and (max-width: 567px) {

    #countdown-timer .card-body {
        padding: 1.2rem 0.5rem;
    }

    #countdown-timer .d-flex {
        flex-direction: row;
        justify-content: center;
        align-items: center;
        flex-wrap: nowrap;
    }

    #countdown-timer .d-flex > div {
    display: flex;                 
    flex-direction: column;        
    justify-content: center;
    align-items: center;           
}


    #countdown-timer .display-3 {
        font-size: 1.9rem;
        white-space: nowrap;
        display: inline-flex;
        justify-content: center;
        align-items: center;
    }

    #countdown-timer .h3 {
        font-size: 5rem;
        white-space: nowrap; 
        display: inline-flex;
        justify-content: center;
        align-items: center;
    }

    #countdown-subtitle {
        font-size: 0.95rem !important;
    }
}
/* Za veoma uske ekrane */
@media only screen and (max-width: 500px) {

    #countdown-timer .d-flex > div {
        margin: 0 2px !important;
        padding: 0 2px !important;
        min-width: 60px !important;   
    }

    #countdown-timer .display-3 {
        font-size: 1.5em !important;  
        white-space: nowrap;
    }

    #countdown-timer .h3 {
        font-size: 1.2rem !important; 
        white-space: nowrap;
    }
}

@media (max-width: 576px) {

    /* wrapper za svaki broj */
    #countdown-timer .d-flex > div {
        margin: 0 4px !important;
        padding: 0 4px !important;
    }

    /* Bootstrap mx-4 override */
    #countdown-timer .mx-4 {
        margin-left: 0.25rem !important;
        margin-right: 0.25rem !important;
    }

    /* Bootstrap px-4 override */
    #countdown-timer .px-4 {
        padding-left: 0.25rem !important;
        padding-right: 0.25rem !important;
    }

    /* card body padding */
    #countdown-timer .card-body {
        padding: 0.75rem 0.5rem !important;
    }

    /* BROJEVI */
    #countdown-timer .display-3 {
        min-width: 3ch;          
        font-size: 2rem !important;
        line-height: 1.1;
        text-align: center;
    }

    /* TEKST (Dana, Sati…) */
    #countdown-timer .h3 {
        font-size: 0.9rem !important;
        margin: 0 !important;
    }
	
}
@media (max-width: 576px) {

    /* 1. ukloni SAV razmak iz wrappera */
    #countdown-timer .d-flex {
        gap: 0 !important;
    }

    /* 2. ukloni bootstrap margine sa unutrašnjih divova */
    #countdown-timer .d-flex > div {
        margin: 0 !important;
        padding: 0 2px !important;
    }

    /* 3. TOTALNO ukloni margin sa labela (OVO JE KLJUČNO) */
    #countdown-timer .h3 {
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1.1;
        font-size: 0.85rem !important;
    }
	#countdown {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
	#countdown-timer .d-flex.justify-content-center {
        justify-content: space-between !important;
		padding: 1rem 1.5rem !important;
	}
}