@import url("colors.css");
@import url("inputs.css");


html {
    font: normal 16px Arial, sans-serif;
    color: black;
    background-color: white;
}

body {
    display: block;
    width: 1050px;
    padding: 0;
    margin: 0 auto 0 auto;
}

/* Header del */

div.header {
    display: block;
    width: 100%;
    height: 120px;
    margin: 15px auto 25px auto;
    float: none;
    clear: both;
}

div.header div#zpmlogo {
    display: block;
    width: 280px;
    height: 120px;
    float: left;
    margin: 0 5px 0 0;
    background: url("/design/img/logo_volja_24_min.png") no-repeat top left;

}
div.header  div.centertop {
    text-align: right;
    float: left;
    padding-top: 20px;
    position: relative;
}

div.header div#btrlogo {
    display: block;
    width: 320px;
    height: 120px;
    float: right;
    margin: 0;
    background: url("/design/img/logo_boter.png") no-repeat top left;

}
/** teli barvi sta, če pobarvam BAD in OK okna */
input.red {
	background-color: #eeaaaa;
}
input.green {
	background-color: #99ff99;
}

div.w50 {
	width: 45%;
	float: left;
}

div.right {
	float: right;
}

h1 {
    font-size: 1.3em;
    color: black;
    text-align: center;
    display:block;
	padding-top: 50px;
	margin-bottom: 40px;
}

h2 {
    font-size: 1.2em;
    color: darkred;
	padding-top: 30px;
	text-align: center;
	text-transform: uppercase;
}

h3 {
    font-size: 1.1em;
    color: blue;
	padding-top: 10px;
	text-align: left;
}

div.table {
    width: 100%;
    display: table;
/*    border-collapse: collapse; */
    background-color: #e9e9e9;
	clear: both;
}

div.login_box,
div.clear {
	clear: both;
	margin: 0 auto 0 auto;
	width: 500px;
}

div.nofloat.right {
	margin: 0 0 0 auto;
	float: none !important;
}

div.login_box {
	padding-top: 30px;
}

div.login_box > p {
	text-align: center;
	padding-top: 15px;
}


div#userBar {
	margin: 5px 0 5px auto;
	text-align: right;
	color: black;
}

div#userBar span#profile_link,
div#userBar span#logout_link
{
	text-decoration: none;
	color: blue;
	cursor:pointer;
}

div#userBar span#userAdmin_link::before,
div#userBar span#profile_link::before,
div#userBar span#profile_link::after {
	content: '|';
	color: black;
}

div#UserBar a,
div#UserBar a:visited,
div#UserBar a:active {
	text-decoration: none;
	color: blue;
}

div.tr {
    display: table-row;
}

div.td {
    display: table-cell;
    background-color: inherit;
    border-top: 1px solid #999999;
    border-left: 1px solid #999999;
    border-right: 1px solid #999999;
    height: 1.6em;
    padding: 5px;
}

div.tr.last div.td {
    border-bottom: 1px solid #999999 !important;
}

div.tr div.td input {
	width: 95%;
        height: 26px;
}

div.tr div.td img.show_pass {
    height: 16px;
    width: 20px;
    margin-bottom: -3px;
    padding: 0;
}

div.td:nth-child(even) {
    border-left: none;
}
div.td:nth-child(odd) {
    border-right: none;
}

div.single {
    border: 1px solid #999999 !important;
}

input.extra_large {
	display: block;
	margin: 35px auto 35px auto;
	width: 50%;
	height: 40px;
	font: bold 16px arial;
	color: black;
	background-color: #99ff99;
	border: 1px solid black;
	box-shadow: 3px 3px 3px #33aa33;
}

input.extra_large:active {
	background-color: #88ee88;
	box-shadow: 0;
	box-shadow: -3px -3px 3px #33aa33;

}
div.sklop {
	display: block;
	clear: both;
	font-weight: bold;
}

div.sklop.lvl1 {
    font-size: 1.2em;
    color: darkred;
	text-align: center;
	width: 100%;
	min-height: 20px;
	padding-top: 5px;
	margin-bottom: 35px;
	margin-top: 35px;
}

/* to je dodatna razlaga */
div.lvl1  > p.opis {
	font-size: 1em;
	color: black;
	font-weight: normal;
	
}

/* okvir "tabele"  */
div.form_table {
	clear: both;
	width: 100%;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: stretch;
}

div.form_table > div.polje {
	flex: 0 0 45%;
	
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: stretch;
	
}


div.form_table > div.polje > span,
div.form_table > div.polje > container > span {
	text-align: left;
	margin: 0 auto 0 0;
	padding-top: 0.7em;
	flex: 0 0 39%; 
}
div.form_table > div.polje > container.komentar > span.text {
	margin-right: 0;
        padding-left: 15px;
        color: #0000aa;
        font-style: normal;
}

div.form_table > div.polje > container.komentar > span.text.strong {
        font-weight: bold;
        color: black;
	margin-right: 0;
        padding-left: 15px;
        font-style: normal;

}
div.form_table > div.polje > container.komentar > span.vsebina {
        font-style: italic;
}

div.form_table.c1 > div.polje > span {
	flex: 0 0 99%; 
}


div.form_table > div.polje  > span.help,
div.form_table > div.polje  > container > span.help,
div.form_table > div.polje  > span.history,
div.form_table > div.polje  > container > span.history {
	display: inline-block;
	position: relative;
	flex: none;
	width: 5px;
	margin-left: -10px;
	cursor:pointer;
	color: black;
}

div.form_table > div.polje > span.help.dopolni,
div.form_table > div.polje  > container > span.help.dopolni {
	width: 25px;
	margin-left: -35px;    
        color: darkgreen;
}



span.help.dopolni {
    color: darkgreen;
}
span.help.dopolni.red {
    color: red !important;
    font-weight: bold;
}

span.help.dopolni.green {
    color: darkgreen;
}


div.textarea > span.text.green,
div.textarea > container > span.text.green {
	flex: 0 0 200px !important;
}

div.chk_rad_container > span.help,
div.chk_rad_container > container > span.help,
div.form_table > span.help {
	cursor: pointer;
}

div.form_table > container {

	clear: both;
	width: 100%;
	
}



div.form_table > div.polje  > span.help.green,
div.form_table > div.polje  > span.text.green,
div.form_table > span.help.green,
div.form_table > span.text.green,
div.form_table > div.polje  > container > span.text.green,
div.chk_rad_container > span.help.green,
div.chk_rad_container > container > span.help.green,
span.green {
	color: darkgreen;
}


div.form_table > div.polje  > input.komentar,
div.form_table > div.polje  > container > input.komentar {
	border-bottom: 1px solid darkgreen;
	
}
div.form_table > div.polje > container {
	display: flex;
	width: 100%;
}

div.form_table > div.polje > container > container {
	flex: 0 0 100%;
	clear: both;
}

div.form_table > div.polje > input,
div.form_table > div.polje > container > input,
div.form_table > div.polje > span.vsebina,
div.form_table > div.polje > select {
	display: inline-block;
	margin: 0 0 0 auto;
	flex: 0 0 60%;	
	max-width: 60%;
}

div.form_table.c1.sameline > div.polje > span {
	flex: 0 0 45%; 
}
div.form_table.c1.sameline > div.polje > input,
div.form_table.c1.sameline > div.polje > container > input,
div.form_table.c1.sameline > div.polje > select,
div.form_table.c1.sameline > div.polje > div.chk_rad_container{
	flex: 0 0 50%; 
}
div.form_table.c1.sameline > div.polje > span.help {
	flex: none;
	margin-left: -10px;
	margin-right: 0px;
	width: 10px;
}

div.form_table > div.polje > div.chk_rad_container {
	display: inline-block;
	margin: 0 0 0 auto;
	padding-top: 0.7em;
	flex: 0 0 60%;	
}

div.form_table > div.polje.r20 > span,
div.form_table > div.polje.r20 > container > span {
	flex: 0 0 19%;	
}
div.form_table > div.polje.r20 > div.chk_rad_container {
	flex: 0 0 80%;	
}

div.form_table > div.polje.r25 > span,
div.form_table > div.polje.r25 > container > span {
	flex: 0 0 24%;	
}
div.form_table > div.polje.r25 > div.chk_rad_container {
	flex: 0 0 75%;	
}

div.polje.cols2 div.chk_rad_container {
	column-count: 2;
}

div.polje p.opis {
	display: inline;
	margin-left: 10px;
	font-style: italic;
	font-size: 0.9em;
}


/* uporabi, ko imaš eno vrstico za opis in spodaj potem input (FULL length) */
div.form_table > div.polje.full > span {
	flex: 0 0 100%;
}

div.form_table > div.polje.full p.opis {
	display: block;
	margin-left: 0;
}


div.form_table > div.polje.full > textarea {
	flex: 0 0 100%;
	width: 100%;
	min-height: 200px;

}


div.form_table.c2 > div.polje {
	flex: 0 0 45%;
}

div.form_table.c1 > div.polje {
	flex: 0 0 100%;
}

div.x {
    flex: 0 0 5%;
    padding-top: 0.7em;
    width: 5%;
}

div.x a {
    cursor:pointer;
}



div.sklop.lvl2 {
    font-size: 1em;
    color: black;
	font-weight: normal;
	text-align: center;
	width: 100%;
	min-height: 20px;
	padding-top: 5px;
	margin-bottom: 35px;
	margin-top: 35px;	
	
}

div.sklop.lvl2::before,
div.sklop.lvl2::after
{
	content: ' -- ';
}



div.komentar,
div.komentar::before {
	font-style: italic;
}
div.finance,
div.monospace,
div.monospace div.komentar {
	font-family: monospace;
	font-style: normal;
}

div.finance div.polje {
    height: 29px;
}

div.polje.bold {
    font-weight: bold;
}

div#polje_vsota_visina_posojil {
    margin-top: 25px;
}

div.finance div.polje span.tekst {
	width: 520px;
        border-bottom: 1px solid #cccccc;
        height: 29px;
}


div.finance div div.komentar {
    width: 520px;
    font-weight: bold;
    
}

div.finance div div.komentar:nth-of-type(2) {
    width: 166px;
    text-align: right;
}

div.finance div.block.narrow_cols div
{
    width: 130px;
    margin-right: 20px;
}

div.finance div.loop.narrow_cols div input,
div.polje.narrow_cols input {
    width: 130px;
    margin-right: 20px;
}

div.block.finance {
    padding: 0px 10px 0 10px;
}

div.polje input[type="text"].othr_txt.nosum {
    height: 25px;
}

div#polje_redni_mesecni_prihodki span.tekst input,
div#polje_redni_mesecni_odhodki span.tekst input{
	text-align: left;
	padding-left: 3px;
}

div.znesek input,
div.custom_znesek input{
	font-family: monospace;
	font-style: normal;
	text-align: right;
	padding-right: 3px;
}

/*
div#polje_posojila > div > div :not(.loop),
div#polje_posojila > div > input,
div#loop_posojila > div > div :not(.loop),
div#loop_posojila > div > input,
div#polje_dolgovi > div > div :not(.loop),
div#polje_dolgovi > div > div.komentar,
div#polje_dolgovi > div > input {
	width: 200px;
        margin-right: 20px;
        padding: 10px;
	
}
*/
div.komentar::before {
	content: '';
}

div.block.vzorec1 {
	background-color: #eaffff;
}
div.block.vzorec2 {
	background-color: #ffffea;
}

div.block.vzorec3 {
	background-color: #ffeaea;
}

div.block >label,
div.loop > label {
	display: block;
	text-align: left;
	margin: 10px auto 10px 0px;
	font-weight: bold;
	
}

div.block > label::before,
div.loop > label::before {
	content: '# ';
}

div.line div:not(.line) {
	display: inline-block;
	width: 400px;
	margin: 0;
	clear: none;
}

div.polje {
	padding: 0;
	margin: 0;
	min-height: 2.5em;
	vertical-align: middle;
}

div.polje span.tekst {
	display:inline-block;
	width: 200px;
}


input.ptt {
	width: 40px;
}
div.form_table > div.polje > input.ptt {
	flex: 0 0 40px;
	width: 40px;
}

div.form_table > div.polje > input.posta {
	flex: 0 0 220px;
	width: 220px;
	
}
input.posta {
	width: 140px;
}
span.file_err::after {
	content: '\A';
	white-space: pre; /* or pre-wrap */	
}


span.add_extra {
	display: inline-block;
	margin-left: 200px;
}

label.file_container input[type="file"] {
  position: absolute;
  top: -1000px;
}
.file_container {
  cursor: pointer;
  border: 1px solid #cccccc;
  border-radius: 5px;
  padding: 5px 15px;
  margin: 5px;
  background: #dddddd;
  display: inline-block;
}
.file_container:hover {
  background: #5cbd95;
}
.file_container:active {
  background: #9fa1a0;
}
.file_container:invalid+span {
  color: #000000;
}
.file_container:valid+span {
  color: #ffffff;
}


div#polje_submit submit,
div#polje_submit input,
div#polje_submit button {
	margin-top: 35px;
	margin-bottom: 50px;
	width: 100%;
	height: 50px;
}

div#polje_submit input.left {
	width: 40% !important;
	float: left;
}

div#polje_submit input.right {
	width: 40% !important;
	margin-right: 0;
	float: right;
}

table.dashboard {
	width: 100%;
	border-collapse: collapse;
}

table.dashboard thead {
	background-color: var(--table-header);
	
}

table.dashboard tr td {
	border: 1px solid var(--light1);
}

table.dashboard tr td.history {
	padding: 20px;
}

table tr td img {
	width: 20px;
	border: 0;
	cursor: pointer;
	margin-right: 10px;
}

div.wrapper {
	margin-top: 35px;
	border-top: 1px dotted var(--light2);
}

p.italic {
	font-style: italic;
}

div.separator {
	display: block;
	width: 100%;
	clear: both;
	height: 10px;
	margin-top: 10px;
	border-top: 1px dashed var(--light1);
}

div.item.high {
	height: 30px;
	
}

div#pagination_top {
	height: 60px;
	clear: both;
	width: 100%;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: stretch;
}

div#pagination_top div.page {
	
	border-left: 1px solid var(--light1);
	border-top: 1px solid var(--light1);
	border-bottom: 1px solid var(--light1);
	flex: 1 0 auto;
	
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: stretch;
	
	text-align: center;
	padding-top: 18px;
	
	font: normal 1em arial;
	
}

div#pagination_top div.page a {
    color: black;
    text-decoration: none;
}


div#pagination_top div.page.active {
	background-color: var(--light1);
}

div#pagination_top div:last-of-type {
	border-right: 1px solid var(--light1);
}

div.success_box,
div.info_box {
	width: 100%;
	border: 1px solid black;
	text-align: center;
}

div.success_box {
	background-color: lightgreen; 	
}
div.info_box {
	background-color: #dadaff;
}

div.success_box p,
div.info_box p {
	 padding: 5px auto 5px auto;
}

div.manjka {
	border: 3px dashed red;
	padding: 10px 5px 10px 5px;
}

small.premalo_crk {
	font-size: 1em;
	font-weight: bold;
	color: red;
	font-style: italic;
}

div#div_oddaj_neustrezno {
 	display: none; 
	margin-top: 30px;
	padding-top: 10px;
	padding-bottom: 10px;
	background-color: #ffeaeb;
	
}

div.nova_stran {
	display: block;
	border: 1px solid black;
	padding: 10px;
	text-align: center;
	font-weight: bold;
}


div#opozorilo {
	position: fixed;
	z-index: 2;
	top: 90px;
	left: 50%;
	margin-left: -210px;
	width: 380px;
	height: 100px;
	text-align: left;
	border: 2px solid white;
	border-radius: 10px;
	background-color: #d01d33;
	padding: 20px;
	color: white;
	display: none;
}

.add_extra a {
    cursor:pointer;
}

.add_extra a.file {
    color: blue;
}
.add_extra a.del {
    color: red;
}


div.c120 {
    width: 120px !important;
}

div.c150 {
    width: 150px !important;
}

div.c200 {
    width: 200px !important;
}

div.c250 {
    width: 250px !important;
}

div.c300,
div.c300 div{
    width: 300px !important;
}

div.c350,
div.c350 div {
    width: 350px !important;
}

div.c380,
div.c380 div {
    width: 380px !important;
}

div.finance div.polje.checkbox span.tekst {
    display: none;
}


input[type=button].submit {
    margin-top: 30px;
    margin-left: 300px;
    width: 400px;
    height: 50px;
    font-weight: bold;
}


div.needs_fix {
    background-color: #ffeaeb;
    border-bottom: 2px dotted red;
    margin: 2px 0 2px 0;
}

div.has_comments{
    background-color: #ffeaeb;
    border: 2px solid red;
    margin: 2px 0 2px 0;
}

.help.dopolni {
    cursor: pointer;
}

#master_komentar {
    height: 400px;
}

#master_komentar_druzina {
    width: 1004px;
    border: 3px solid red;
    font-weight: bold;
    padding: 20px;
    margin-bottom: 30px;
    
}

.noediting {
    pointer-events: none;
    color: grey;
}

input[type="text"]:read-only,
input[type="number"]:read-only,
textarea:read-only {
    color: grey !important;
}

table.dashboard td.otroci {
    padding-left: 50px;
    padding-top: 20px;
}

table.dashboard td.otroci table {
    border: 0;
    border-collapse: collapse;
    width: 100%;
    left: 50px;
}



table.dashboard td.otroci table thead tr td{
    border: 1px solid white;
    background-color: #cccccc;
    color: black;
    font-weight: bold;
}

table.dashboard td.otroci table thead tr:nth-of-type(1) td{
    color: blue;
    background-color: #ffffff;
    border: 0;
    padding-bottom: 5px;
}

table.dashboard td.otroci table tr td.green{
    background-color: #99ff99;
}
table.dashboard td.otroci table tr td.red{
    background-color: #ff3333;
    color: white;
    font-weight: bold;
}

div#otrok_pregled_btr span.red {
    background-color: #ffaaaa;
}
div#otrok_pregled_btr span.green {
    background-color: #aaffaa;
}


#otrok_pregled_btr div.block {
    width: 100%;
}

#otrok_pregled_btr span.tekst {
    width: 220px;
}

#otrok_pregled_btr h2 {
    width: 100%;
    clear: both;
    display: block;
    padding-top: 0px;
}


#otrok_pregled_btr div.block.border {
    border: 1px dotted black;
    padding: 10px;
    display: flex;
    clear: both;
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: stretch;    
}

div.line {
    width: 100%;
    height: 1.5em;
    clear: both;
}

div#polje_header_krediti,
div#polje_header_leasingi {
    height: 3.5em;
}

div.polje.double div.line input {
    height: 1.3em;
    margin: 0;
}
div.polje.double {
    min-height: 7em;
    display: block !important;
    flex: 0 0 45%;
    
}

div.polje input#kraj.shorter  {
    width: 110px !important;
}

div#polje_kje_so_zaprosili > div.line {
    height: 2.5em;
}

table#userList thead,
table#userList tfoot
{
    font-weight: bold;
    background-color: #dddddd;
}

table#editUser {
    width: 400px;
    margin: 0 auto 15px auto;
}

table#editUser tbody tr td {
    height: 2em;
}

table#editUser tbody tr td:nth-of-type(2) {
    text-align: right;
}

table#userList tbody tr td {
    cursor:pointer;
}



a, a:visited {
    color: blue;
}


p.center {
    text-align: center;
}

#podaj_predlog {
    margin: 10px auto 10px 400px;
    cursor: pointer;
    text-align: center;
    width: 250px;
    height: 40px;
    background-color: #ffaaaa;
    border: 3px solid red;
    color: black;
    font-size: 1em;
    font-weight: bold;
    border-radius: 5px;
    box-shadow: 2px 2px #9fa1a0;
    
}