/* Main CSS */

@font-face {
	font-family: "fontello";
	src: url("/static/font/fontello.woff2") format("woff2"),
		 url("/static/font/fontello.woff") format("woff"),
		 url("/static/font/fontello.ttf") format("ttf");
}
/*
@font-face {
	font-family: "Alice";
	src: url("/static/font/Alice-Regular.woff") format("woff");
	src: url("/static/font/Alice-Regular.ttf") format("ttf");
}
*/
/*
@font-face {
	font-family: "Kameron";
	src: url("/static/font/Kameron-Regular.woff") format("woff");
	src: url("/static/font/Kameron-Regular.ttf") format("ttf");
}
*/
html {
	min-height: 100vh;
	height: 100%;
}

body {
	/*min-height: 100vh;*/
	height: 100%;
	/*max-width: 1200px;*/
	margin: 0;
	font-family: "Kameron", serif;
	font-size: 1em;
	line-height: 1.5em;
	position: relative;
	display: flex;
	flex-direction: column;
}

h1, h2 {
	font-family: "Alice", serif;
}

header {
	position: fixed;
	width: 100%;
	top: 0;
	/*height: 80px;*/
	display: flex;
	flex-direction: row;
	align-items: center;
	z-index: 2;
	background-color: rgba(255,255,255,0.8);
	backdrop-filter: saturate(100%) blur(10px);
	/*transition: all 0.4s;*/
}

nav {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-end;
	max-width: 1200px;
	margin: 0 auto 0 auto;
	/*font-family: "Kameron", serif;*/
	font-weight: 600;
	font-style: normal;
	/*max-height: 80px;*/
	width: 100%;
	/*transition: 0.4s;*/
}
/*
nav:after {
	content: "";
	display: block;
	clear: both;
}
*/

main {
	/*width: 100%;*/
	/*min-height: 100vh;*/
	flex: 1;
	width: 100%;
	max-width: 1200px;
	/*margin-top: 10em;*/
	margin: 120px auto 0 auto;
	/*padding-bottom: 5em;*/
}

/* main > div {
	display: block;
	height: 100%;
	//margin-bottom: 10%;
	
}*/

.subnav {
	display: block;
	width: 100%;
}

.dugme {
	display: block;
	background-color: #1fa64c;
	color: white;
	padding: 0.75rem 2rem;
	font-weight: 600;
	width: max-content;
	/*vertical-align: middle;*/
	text-decoration: none;
	border-radius: 0.15rem;
}

.dugme:hover {
	background-color: #1fb64c;
}

.dugme_1 {
	display: block;
	background-color: #1e4ba6;
	color: white;
	padding: .5rem 1rem;
	margin: .5rem;
	width: max-content;
	vertical-align: middle;
	text-decoration: none;
	border-radius: 0.15rem;
	height: 100%;
}

.dugme_1:hover {
	background-color: #ff1f1f;
}

.btn {
	display: inline-block;
	font-weight: 400;
	color: #212529;
	text-align: center;
	vertical-align: middle;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	background-color: transparent;
	border: 1px solid transparent;
	padding: 0.375rem 0.75rem;
	font-size: 1rem;
	line-height: 1.5;
	border-radius: 2px;
	transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.btn:hover {
	color: #212529;
	text-decoration: none;
}

.login {
	max-width: 480px;
	margin: 0 auto;
}

.register_form {
	max-width: 480px;
	margin: 0 auto;
}

.btn:focus, .btn.focus {
	outline: 0;
	box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.btn-primary {
	color: #fff;
	background-color: #1e4ba6;
	border-color: #0c2984;
}

.btn-primary:hover {
	color: #fff;
	background-color: #0069d9;
	border-color: #0062cc;
}

.btn-danger {
	color: #fff;
	background-color: #dc3545;
	border-color: #dc3545;
}

.btn-danger:hover {
	color: #fff;
	background-color: #c82333;
	border-color: #bd2130;
}

.btn-danger:focus, .btn-danger.focus {
	color: #fff;
	background-color: #c82333;
	border-color: #bd2130;
	box-shadow: 0 0 0 0.2rem rgba(225, 83, 97, 0.5);
}

.submit {
	min-width: 120px;
	max-width: 20%;
}

/* *** */

.logo {
	margin-right: auto;
	/*height: 80px;*/
	/*transition: 0.4s linear;*/
}

.logo_img {
	max-height: 80px;
	transition: 0.4s;
}

.logo_img_small {
	/*transform: scale(1,0.5);*/
	height: 40px;
	transition: 0.4s;
}

.nav_link {
	display: block;
	text-decoration: none;
	color: darkgray;
	background-color: rgba(255, 255, 255, 0);
	border-bottom: 2px solid rgba(255, 255, 255, 0);
	font-family: "Kameron";
	/*font-weight: 600;*/
	height: 100%;
	padding: 1em;
}

.nav_link:hover {
	color: #1e4ba6;
	background-color: white;
	border-color: red;
}

.nav_link:active {
	color: #1e4ba6;
	background-color: white;
	border-color: red;
}

.nav_link_active {
	color: #1e4ba6;
	background-color: white;
	border-color: red;
}

.nav_levo {
	display: block;
	/*float: left;*/
	padding: 1em;
	/*margin: 0 auto 0 0;*/
	/*font-family: inherit;*/
}

.nav_desno {
	display: block;
	/*float: right;*/
	/*padding: 1em;*/
	/*font-family: inherit;*/
}

/* nova transakcija */
.form-group {
	margin-bottom: 1rem;
}

/* */
.transakcija {
	margin: 0 auto;
	max-width: 640px;
	padding-top: 2em;
	padding-bottom: 5em;
}

.unos_polje {
	width: 100%;
	display: inline-block;
	box-sizing: border-box;
	font-family: inherit;
	font-size: 100%;
}

.unos_opis {
	font-family: inherit;
	font-size: 100%;
	margin-top: 12px;
}

button,
input,
select,
textarea {
	font-family: inherit;
	font-size: 100%;
}

input,
label,
select {
	width: 100%;
	display: inline-block;
	box-sizing: border-box;
}

label {
	/*margin-top: 12px;*/
}

input,
select {
	padding: 10px;
	resize: vertical
}

.email {
	width: auto;
}

/* password toggle checkbox */
.passwordToggle {
	display: flex;
	justify-content: flex-end;
}
.passwordToggle > * {
	display: block;
	width: auto;
}
#togglePassword {
	margin-right: .5rem;
}

/* Alerts */

.alert {
	position: relative;
	padding: 0.75rem 1.25rem;
	margin-bottom: 1rem;
	border: 1px solid transparent;
	border-radius: 0.25rem;
}

.alert-heading {
	color: inherit;
}

.alert-link {
	font-weight: 700;
}

.alert-dismissible {
	padding-right: 4rem;
}

.alert-dismissible .close {
	position: absolute;
	top: 0;
	right: 0;
	padding: 0.75rem 1.25rem;
	color: inherit;
}

.alert-primary {
	color: #004085;
	background-color: #cce5ff;
	border-color: #b8daff;
}

.alert-primary hr {
	border-top-color: #9fcdff;
}

.alert-primary .alert-link {
	color: #002752;
}

.alert-secondary {
	color: #383d41;
	background-color: #e2e3e5;
	border-color: #d6d8db;
}

.alert-secondary hr {
	border-top-color: #c8cbcf;
}

.alert-secondary .alert-link {
	color: #202326;
}

.alert-success {
	color: #155724;
	background-color: #d4edda;
	border-color: #c3e6cb;
}

.alert-success hr {
	border-top-color: #b1dfbb;
}

.alert-success .alert-link {
	color: #0b2e13;
}

.alert-info {
	color: #0c5460;
	background-color: #d1ecf1;
	border-color: #bee5eb;
}

.alert-info hr {
	border-top-color: #abdde5;
}

.alert-info .alert-link {
	color: #062c33;
}

.alert-warning {
	color: #856404;
	background-color: #fff3cd;
	border-color: #ffeeba;
}

.alert-warning hr {
	border-top-color: #ffe8a1;
}

.alert-warning .alert-link {
	color: #533f03;
}

.alert-danger {
	color: #721c24;
	background-color: #f8d7da;
	border-color: #f5c6cb;
}

.alert-danger hr {
	border-top-color: #f1b0b7;
}

.alert-danger .alert-link {
	color: #491217;
}

/* Profil */

.profil_info {
	margin: 1rem;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
}

.profil_info  h1 {
	margin-top: 2em;
	font-size: 2.5em;
	line-height: 1;
}

.profil_info  h2 {
	/*margin-top: 2em;*/
	font-size: 1.5em;
	line-height: 1;
}

.profil_edit_link {
	max-height: 1.5em;
	max-width: max-content;
}

.saldo {
	display: flex;
	flex-flow: column wrap;
	margin: 1rem;
	align-items: center;
}

.saldo > h3 {
	max-width: 350px;
	text-align: right;
}

.balans {
	display: flex;
	flex-flow: row wrap;
	font-size: 1.5em;
	font-weight: bold;
	justify-content: space-between;
	align-items: baseline;
	min-width: 300px;
	width: 100%;
}

.balans > p {
	/*min-width: 250px;*/
}

.balans_naslov {
	text-align: left;
	margin-bottom: .5rem;
	/*margin-right: auto;*/
	/*align-self: flex-start;*/
}

.balans_sadrzaj {
	text-align: right;
	margin-top: .5rem;
	/*margin-left: auto;*/
	/*align-self: flex-end;*/
}

/* Tabela */

table {
	width: 100%;
	min-width: max-content;
}

.kategorija {
	max-width: min-content;
}

.iznos {
	max-width: min-content;
	text-align: right;
}

.vrsta_rashod .iznos {
	color: red;
	font-weight: bold;
}

.vrsta_prihod .iznos {
	color: lightgreen;
	font-weight: bold;
}

th {
	text-align: center;
}

.broj_transakcije {
	text-align: right;
}

.datum {
	text-align: center;
}


.korsnici {
	color: gray;
}

.ostali {
	color: gray;
}

.predao,
.primio {
	text-align: left;
}

.aktivan,
.predao,
.primio {
	color: black;
	font-weight: bold;
}

/* klase kategorija transakcija u izveštaju */
.prihod {
	color: #1fb64c;
	/*color: lightgreen;*/
	width: min-content;
}

.prihod::before {
	content: "🡡";
	/*content: "\ea5e";*/
	/*content: "\e800";*/
	display: inline-block;

}

.rashod {
	color: red;

}

.rashod::before {
	content: "🡣";
	/*content: "\ea5b";*/
	/*content: "\e801";*/
	display: inline-block;

}

.transfer {
	color: magenta;
}

.transfer::before {
	content: "⮂";
	display: inline;

}

.kasa {
	color: orange;
}

.kasa::before {
	content: "🡦";
	display: inline;

}

.valuta {
	text-align: center;
}

.opis {
	text-align: left;
}

/* */
option[value~="admin"] {
	display: none;
}

/* Transakcija pojedniačna */

.lista_transakcija {
	list-style: none;
	display: block;
}

.lista_transakcija > li {
	display: block;
}
/* -- */
.transakcija_pojedinacna {
	display: flex;
	flex-flow: column;
	max-width: 640px;
	margin: 1em;
}

.transakcija_pojedinacna > div {
	display: flex;
	flex-flow: row;
	justify-content: space-between;
}

.transakcija_pojedinacna > div > p:first-child {
	font-weight: bold;
}

.transakcija_pojedinacna > form {
	margin-top: 2em;
	max-width: 50%;
}

/* *************** 

	Div Tabela

**************** */
.tabela {
	display: grid;
	grid-template-columns: max-content max-content 1fr 1fr min-content max-content 1fr min-content max-content;
	width: 100%;
}

.th {
	display: block;
	margin: 0.5em 1em;
}

.tb {
	margin: 0.5em 1em;
	flex: 1;
}

.t-kategorija {
	/*max-width: min-content;*/
}

.t-iznos {
	/*max-width: min-content;*/
	min-width: 100px;
	text-align: right;
}

.t-vrsta_rashod .t-iznos {
	color: red;
	font-weight: bold;
}

.t-vrsta_prihod .t-iznos {
	color: lightgreen;
	font-weight: bold;
}


.t-broj_transakcije {
	text-align: right;
	/* width */
	min-width: 50px;
}

.t-datum {
	text-align: center;
	margin: auto 1em;
	min-width: 100px;
}


.t-korsnici {
	color: gray;
}

.t-ostali {
	color: gray;
	/* width*/
	min-width: 100px;
	z-index: 1;
}

.t-predao,
.t-primio {
	text-align: left;
	min-width: 100px;
}

.t-aktivan,
.t-predao,
.t-primio {
	color: black;
	font-weight: bold;
}

/*             */
/* FLEX TABELA */
/*             */

.tabela_flex {
	display: flex;
	flex-direction: column;
	margin: 0;
}

.f-tabela_zaglavlje {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
}

.f-tabela_vrsta {
	display: flex;
	flex-direction: row;
	position: relative;
}

.f-tabela_vrsta:hover {
	background-color: lightgray;
}

.transakcija_link {
	display: block;
	position: absolute;
	height: 100%;
	width: 100%;
}

.th-cell {
	box-sizing: border-box;
	display: inline-block;
	margin: 0;
	padding: 0.5em 1em;

	flex: 1;
}

.tb-cell {
	box-sizing: border-box;
	display: inline-block;
	margin: 0;
	padding: 0.5em 1em;

	flex: 1;
}

.col-broj_transakcije {
	/*display: block;*/
	min-width: 50px;

	flex: 0;
}
.col-datum {
	/*display: block;*/
	text-align: center;
	min-width: 120px;
	width: 140px;

	flex: 0;
}
.col-predao {
	/*display: block;*/
	min-width: 100px;
	width: 120px;
}
.col-primio {
	/*display: block;*/
	min-width: 100px;
	width: 120px;
}
.col-ostali {
	z-index: 1;
	box-sizing: border-box;
	margin: 0;
	/*min-width: 100px;*/
	width: 120px;
	flex-shrink: 0;

	flex: 1;
}
.col-kategorija {
	/*display: block;*/
	min-width: 40px;

	flex: 0;
}
.col-iznos {
	/*display: block;*/
	width: 100px;
	/*text-align: right;*/
	
	display: flex;
	flex-grow: 0;
	flex-shrink: 0;
	flex-basis: auto;

	justify-content: flex-end;
}

.col-iznos > span {

}

.col-valuta {
	/*display: block;*/
	width: 80px;
	text-align: center;

	flex: 0;
}
.col-verifikovan {
	/*display: block;*/
	width: 45px;

	flex: 0;
}
.col-opis {
	/*display: block;*/
	text-align: left;
	max-width: 320px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;

	flex: 2;
}

.tb-cell-link {
	display: inline-block;
	width: 100%;
	height: 100%;
	/*padding: 0.5em 1em;*/
}

.tb-cell-link:hover {
	background-color: lightblue;
}

.tb-cell-link > span {
	display: inline-block;
	margin: 0;
	padding: 0.5em 1em;
	color: #1e4ba6;
}

/*  */
/* klase kategorija transakcija u izveštaju */
.t-prihod {
	color: lightgreen;
	/*width: min-content;*/
}

.t-prihod::before {
	content: "🡡";
	/*content: "\ea5e";*/
	/*content: "\e800";*/
	display: inline;
	/*font-family: "Arrow";*/
}

.t-rashod {
	color: red;

}

.t-rashod::before {
	content: "🡣";
	/*content: "\ea5b";*/
	/*content: "\801";*/
	display: inline;
	/*font-family: "Arrow";*/
}

.t-transfer {
	color: magenta;
}

/*
.t-transfer::before {
	content: "⮂";
	display: inline;
	font-family: 'seguisym';
}
*/
.t-kasa {
	color: orange;
}
/*
.t-kasa::before {
	content: "🡦";
	display: inline;
	font-family: 'seguisym';
}
*/
.t-valuta {
	text-align: center;
}

.t-verifikovan {
	text-align: left;
}

.v-true {
	color: #1fb64c;
}

.v-false {
	color: red;
}

.t-opis {
	text-align: left;
	max-width: 320px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	/*word-break: break-all;*/
}

.t-kategorija {
	font-family: "fontello";
}

.simboli {
	font-family: "fontello";
}

footer {
	display: block;
	position: relative;
	bottom: 0;
	width: 100%;
	padding: 1em 0;
	color: white;
	background-color: #1e4ba6;
	text-align: left;
	font-size: .8rem;
	/*font-family: serif;*/
	margin-top: 1em;
	border-top: 1px solid;
	border-color: #1fa64c;
}

footer a {
	color: #fff;
}

footer a:hover {
	color: #1fa64c;
}

footer a:visited {
	color: red;
}

footer > span {
	display: block;
	max-width: 1200px;
	margin: 0 auto;
}

@media only screen and (max-width: 600px) {
	
	.logo_img {
		max-height: 64px;
	}

	/* table */
	.th {
		display: none;
	}

	.t-broj_transakcije {
		display: none;
	}

	.tabela {
		display: grid;
		grid-template-columns: min-content 1fr max-content min-content;
		width: 100%;
	}

	.t-datum {
		grid-column: 1 / 5;
		text-align: left;
		background-color: lightgray;
		margin: 0;
	}

	.t-ostali {
		flex: 1;
	}

	.t-predao {
		grid-column: 1 / 3;
	}

	.t-primio {
		grid-column: 3 / 5;
	}

	.t-kategorija {
		grid-column: 1;
	}

	.t-iznos {
		grid-column: 2;
		margin: auto 0;
	}

	.t-valuta {
		grid-column: 3;
	}

	.t-opis {
		grid-column: 1 / 5;
		text-align: right;
	}

	/* FLEX TABLE */
	/*
	.tabela_flex {
		display: flex;
		flex-direction: column;
		margin: 0;
	}
	*/
	.f-tabela_zaglavlje {
		display: none;
		/*
		flex-direction: row;
		justify-content: flex-start;
		*/
	}

	.f-tabela_vrsta {
		display: flex;
		/*flex-direction: column;*/
		flex-flow: row wrap;
		position: relative;
	}
	/*
	.f-tabela_vrsta:hover {
		background-color: lightgray;
	}

	.transakcija_link {
		display: block;
		position: absolute;
		height: 100%;
		width: 100%;
	}

	.th-cell {
		box-sizing: border-box;
		display: inline-block;
		margin: 0;
		padding: 0.5em 1em;
	}
	*/
	.tb-cell {
		box-sizing: border-box;
		display: inline-block;
		margin: 0;
		/*padding: 0.5em 1em;*/
	}

	.col-broj_transakcije {
		display: none;
		/*min-width: 50px;*/
	}
	.col-datum {
		/*display: block;*/
		/*min-width: 100px;*/
		width: 100%;
		flex: 1 auto;

		text-align: left;
		padding: 0 1em;
		background-color: lightgray;
	}
	/*
	.col-predao {
		/*display: block;*//*
		min-width: 100px;
		width: 120px;
	}
	.col-primio {
		*//*display: block;*//*
		min-width: 100px;
		width: 120px;
	}*/
	.col-ostali {
		/*min-width: 100px;*/
		/*width: 120px;*/
		/*box-sizing: border-box;*/
		margin: 0;
		/*z-index: 1;*/
		width: 50%;
		/*flex-grow: 1;*/
	}
	.col-kategorija {
		/*display: block;*/
		/*flex-grow: 1;*/
	}
	.col-iznos {
		/*display: block;*/
		/*width: 100px;*/
		/*text-align: right;*/
		padding: 0.5em 0;
		margin-left: auto;

		flex: 1 auto;
		justify-content: flex-end;
		display: flex;
	}
	.col-valuta {
		/*display: block;*/
		width: max-content;
		/*text-align: center;*/
	}
	.col-verifikovan {
		/*display: block;*/
		width: 45px;
		/*order: 1;*/
		/*flex-grow: 1;*/
	}
	.col-opis {
		/*display: block;*/
		/*text-align: left;*/
		width: 100%;
		/*white-space: nowrap;*/
		/*overflow: hidden;*/
		/*text-overflow: ellipsis;*/
		flex: 1 auto;
	}
	/*
	.tb-cell-link {
		display: inline-block;
		width: 100%;
		height: 100%;
		/*padding: 0.5em 1em;*/
	}
	/*
	.tb-cell-link:hover {
		background-color: lightblue;
	}

	.tb-cell-link > span {
		display: inline-block;
		margin: 0;
		padding: 0.5em 1em;
		color: #1e4ba6;
	}
	*/

}