@charset "UTF-8";
* { text-overflow: clip; }
html { height: 100%; }
body {
	font-family: "arial", sans-serif;
	font-size-adjust:none;
	font-stretch:normal;
	font-style:normal;
	font-variant:normal;
	font-weight:normal;
	color:#333333;
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	height: 100%;
}

:not(:defined) {
  visibility: hidden;
}

/* crven okvir #DD3C10 pozadina #FFEBE8 */
table { font-size: 0.9rem; }
input[type='checkbox'] {
  margin: 0;
  vertical-align: bottom;
}
input, select, textarea {
    font-family: arial, sans-serif;
}

form {margin:0; padding:0;}
.st-input {
	display: block;
	float: left;
    outline: none;
    padding: 3px;
    height: 22px;
    border: #bdc7d8 1px solid;
}

#kms_main {
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto -25px;
}
.push { height:25px;}
.foot { height:25px; background:#f2f2f2; font-size:11px; padding-top:7px; text-align:center;}

h1 {
	font-size: 20px;
	font-weight:200;
	margin-top:0px;
}

h2 {
	font-size:18px;
	font-weight:400;
	margin-top:0px;
}

h3 {
	font-size:15px;
	font-weight:bold;
	margin-top:0px;
}

a:link {
	color:#407bdb;
	text-decoration:none;
}
a:hover {
	/*color:#FFCC00;
	text-decoration:underline;*/
	color: #c44;
	text-decoration:none;
}

a:visited {
	color:#407bdb;
	text-decoration:none;
}

a:visited:hover {
	/*color:#FFCC00;
	text-decoration:underline;*/
	color: #c44;
	text-decoration:none;
}

.container {
	width: 1024px;
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	text-align: left; /* this overrides the text-align: center on the body element. */
	border-top: 1px solid #eeeeee;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}
.site_header {
	background-color:#2276bb;
	color:#FFFFFF;
    padding: 0.2rem 0;
}

.site_header .container {
  border: 0;
}

.site_version {
    font-size: 0.8rem;
    padding-left: 0.5rem;
    color: #b7b7b7;
}

.site_logo {
    width: 5%;;
    img {
        height: 36px;
        width: auto;
    }
}
/* NAVIGATION */
#kms_nav {
    display: flex;
    justify-content: center;
    font-size: 0.85rem;
	background-color: #e1e1e1;
	margin-bottom: 1rem;;
}

#kms_nav a {
	color:#369; font-weight:bold;
}

#kms_nav_container {
	width: 1024px;
	text-align: center;
}

#kms_nav_container:not(:has(ul > .nav_item_active:first-child)) {
  margin-left: -2rem;
}

#kms_nav_container ul#nav {
	clear: both;
	list-style: none;
	list-style-image: none;
	list-style-position: outside;
	list-style-type: none;
	margin: 0;
	padding: 0;
    display: flex;
}
ul#nav li {
	display: block;
	float: left;
    padding: 0.7rem 1.2rem;
	margin: 0;
    &:hover {
        background-color: #ececec;
    }
}
#nav li a {
	display: block;
	text-decoration:none;
	font-weight: 500;
}
.nav_item_active {
    background-color: #f1f1f1;
}


.h1blue {color:#369; margin:0; font-size:18px;}
.listact, .itemlist, .numb {
    padding: 0.4rem;
    border-bottom:1px solid #E6E6E6;
}
.listact img {cursor:pointer; cursor:hand; margin:2px 5px 2px 0;}
.tcatlist { border: 1px solid #E6E6E6; margin-top: 10px; width: 100%;}
.tcatlist td { padding: 0.4rem; }
.tcatlist .td-status, .tcatlist .td-narrow {
	max-width: 240px;
	width: 140px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.td-act {padding-bottom:10px; padding-top:3px;}
.td-act a {font-size:11px;}
.th4 {border-bottom:1px #efefef solid;}

ul.tabs {
	margin: 0;
	padding: 0 0 0 5px;
	float: left;
	list-style: none;
	height: 26px;
	border-bottom: 1px solid #999;
	width: 1024px;
}
ul.tabs li {
	float: left;
	margin: 0;
	padding: 0;
	height: 25px;
	line-height: 25px;
	border-top: 1px solid #999;
	border-right: 1px solid #999;
	border-left: 1px solid #999;
	margin-bottom: -1px;
	background: #e0e0e0;
	overflow: hidden;
	position: relative;
}
ul.tabs li a, ul.tabs li a:active, ul.tabs li a:visited {
	text-decoration: none;
	color: #000;
	display: block;
	padding: 0 20px;
	border: 1px solid #fff;
	outline: none;
}
ul.tabs li a:hover {
	background: #fff;
	color:#000;
	text-decoration:none
}
html ul.tabs li.active  {
	height: 26px;
	line-height: 26px;
	background: #fff;
	color:#000;
	border-bottom: 1px solid #fff;
	overflow: hidden;
	margin-bottom: -1px;
}
.tab_container {
	border-top: none;
	clear: both;
	background: #fff;
}
.tab_content {
	display: none;
}

.trhover {
	background:#FFF9D7;/*#ffefbd;*/
}
.trhighlight {
	background:#FEFFD0;
}
#choose-type span {margin-right:10px;}
.plink {border-bottom:1px #369 dotted; color:#369; cursor:pointer; cursor:hand;}
#tblac label {color:#333;}
button { cursor:pointer; cursor:hand; }
.showhand {cursor:pointer; cursor:hand;}
.affbluebtn {padding:7px 15px 7px 15px ! important; font-weight:bold; background:#2276bb; color:#fff; border:1px outset; border-color: #3B6E22 #3B6E22 #2C5115;}
.affgraybtn {padding:7px 15px 7px 15px ! important; background:#f1f1f1; color:#000; border:1px #f2f2f2 outset;}
.affgreenbtn {padding:7px 15px 7px 15px ! important; font-weight:bold; background:#69A74E; color:#fff; border:1px outset; border-color: #3B6E22 #3B6E22 #2C5115;}
.whitebtn2 {
	background: white;
	border: 1px outset;
	padding: 4px 12px 4px 11px;
}
.igreytxt { color:#bbb; }
input[type=button], input[type=submit]{
	font-size: 13px !important;
	cursor: pointer;
}
input[type=button]:disabled, input[type=submit]:disabled, button:disabled {
	color:#c0c0c0;
	cursor: auto;
}


/*pagination*/
#pg { clear:both; color:#3666d4; margin:7px 0 7px 0; text-align:left; }
#pg a { border:1px solid #ccdbe4; background:#f1f1f1; font-family:Arial; font-size:10px; color:#000; margin:0 4px 0 0; padding:1px 8px; text-align:center; text-decoration:none; }
#pg span { color:#39c; margin:0 5px 0 0; padding:1px 5px; text-align:center; text-decoration:none; }
#pg a:hover { background:#3666d4;border-color:#2b55af;color:#fff; }

/* forms */
.msgerror {background:#c44; color:#fff; padding:2px 12px 0 12px;}
.redborder {
	border:1px #DD3C10 solid !important;
	background:#FFEBE8;
}
.sredborder {border:1px #DD3C10 solid; padding:2px; display:inline-block;}
.redtext { color:#DD3C10; }
.greentext { color:#69A74E; }
.tbold {font-weight:bold;}

.kms-pencil {
	color: #8F979E;
}
.kms-pencil:hover {
	color: #60A9E8;
}

.fc {
	background:#fff;
	margin-top:8px;
}

label {
    display: flex;
    gap: .3rem;
    align-items: center;
}
.flabel {
	color: #666666;
	font-weight: 700;
	vertical-align: top;
	padding-top: 12px;
	padding-right: 10px;
	text-align: left;
	width: 180px;
}
.flabel2 {
	color: #666666;
	font-weight: 700;
	padding-right: 10px;
	text-align: left;
}
.fdata {
	padding-bottom: 1px;
	padding-left: 0px;
	padding-right: 0px;
	padding-top: 5px;
	text-align: left;
}
.fright {
	text-align: left;
}
.fspacer {
	padding: 5px 0;
	text-align:left;
	vertical-align: middle;
}
hr {
	background-color: #f1f1f1;
	border:0;
	color: #f1f1f1;/*d9d9d9*/
	margin:0;
	height: 1px;
	width:650px;
	float:left;
}

hr2 {
	background-color: #f1f1f1;
	border:0;
	color: #bbb;/*d9d9d9*/
	margin:0;
	height: 1px;
}

.ftextarea, .finputtext {
	border: 1px solid #BDC7D8;
	padding: 8px;
}

.finputtext2 {
	border: 1px solid #BDC7D8;
	padding: 8px;
	margin:0;
}


.fdata, .fdata .finputtext, .fdata .ftextarea, .flexselect {
	width:372px;
}

.ftextarea {
	display: block;
}

textarea {
	field-sizing: content; /*autoresize*/;
	min-height: 2lh;
}

.fselect {
	padding:5px;
	margin:0;
}

.fsection {
	padding-left:3px;
	color:#369;
	font-size:14px;
	font-weight:700;
}
.frm-clan-top { padding-bottom:3px; padding-right:10px; display:inline-block; }
.rfilter {margin-top:5px;}

.al {text-align:left;}
.ar {text-align:right;}
.ac {text-align:center;}
.nowrap {white-space:nowrap;}

.dmsg { text-align:center; height: 18px; margin: 0 0 0.5rem 0; }
.hidden { display:none; }

.ikms {font-size:12px; line-height:12px; display:inline-block; margin: auto 5px auto auto; position: relative; width: 14px; height: 12px; background-image: url('/images/ui/css3buttons_icons.png'); background-repeat:no-repeat;}
.ik-pen {background-position: 0 -556px;}

table.tgrey {
	background-color:#f2f2f2;
	border:1px #000 solid;
}

.tr-border-bottom-1 > td {
	border-bottom: 1px #ddd solid;
}

.onedelete { color: #d7d7d7; }
.onedelete:hover { color:#E7422C; }

/* ===== kms-dialog (light DOM dopune; ostali stilovi su u Shadow DOM-u) ===== */

/* FOUC zaštita: dok custom element nije upgrade-ovan, sakrij ga.
   Čim Lit definiše komponentu (`:defined`), pravilo prestaje da važi. */
kms-dialog:not(:defined),
kms-confirm:not(:defined) {
    display: none;
}

/* .kms-dialog-msg živi u slotovanom body-ju (light DOM), pa Shadow DOM
   stilovi ne dopiru do njega — kreira ga showMsg() u kms-dialog.js. */
.kms-dialog-msg {
    display: none;
    padding: 0.5rem 0.8rem;
    margin-bottom: 1rem;
    border-radius: 3px;
}
.kms-dialog-msg.is-ok    { background:#dff0d8; color:#3c763d; border:1px solid #d6e9c6; display:block; }
.kms-dialog-msg.is-error { background:#f2dede; color:#a94442; border:1px solid #ebccd1; display:block; }

[slot="footer"] > button:first-child {
    margin-right: 0.5rem;
}

/* Sakrij dd.mm.yyyy format indicator kad je input prazan */

input[type="date"]:not(.has-value):not(:focus),
input[type="datetime-local"]:not(.has-value):not(:focus),
input[type="date"]::-webkit-datetime-edit,
input[type="datetime-local"]::-webkit-datetime-edit {
    color: transparent;
}
input[type="date"]:focus::-webkit-datetime-edit,
input[type="date"].has-value::-webkit-datetime-edit,
input[type="datetime-local"]:focus::-webkit-datetime-edit,
input[type="datetime-local"].has-value::-webkit-datetime-edit {
    color: inherit;
}

.fa-pencil {
    color: #8c8c8c;
    &:hover {
        color: #60A9E8;
    }
}

.fa-times-circle {
    color:#d7d7d7;
    &:hover {
        color:red;
    }
}