:root {
	--margin-bottom:15px;
}
* {
	box-sizing: border-box;
}
html {
	/*font-size: 65%;*/
	font-size: 1vw;
}
@media (min-width:600px) {
	html {
		font-size: 65%;
	}
}
body,html {
	margin:0;
	padding:0;
	font-family: Arial;
	width:100%;
	height:100%;
}
span {
	display:inline-block;
	vertical-align:top;
}
.counter {
	font-weight:bold;
	background: #FFF;
	color: #666;
	padding-left:3px;
	padding-right:3px;
}
.login-page {
	background: url('images/pozadina.jpg');
	background-size: 100% 100%;
	background-repeat: repeat-x;
	background-attachment: fixed;
	perspective: 1000px;
}
.login-page .dialog {
	display:block;
	background: #FFF;
	box-shadow: 5px 5px 5px rgba(0,0,0,0.3);
	width: 60rem;
	margin-left:auto;
	margin-right:auto;
	position: relative;
	top: 40%;
	left: 0%;
	border: 1px solid #CCC;
	padding:0;

	transition: top 0.5s, left 0.7s, transform 0.7s, opacity 0.7s;
	transform-origin: 50% 50%;
	transform: rotateX(-90deg);
	opacity:0;
}
.title-bar {
	display:block;
	background: #5FA2ED;
	width: 100%;
}
.title-bar h1 {
	display:block;
	margin:0;
	padding:0;
	margin-top: 10px;
	font-family: Arial;
	font-size: 2.4rem;
	font-weight: 600;
	width:100%;
}
.title-bar h2 {
	display:block;
	margin:0;
	padding:0;
	margin-top: 5px;
	font-family: Arial;
	font-size: 2rem;
	font-weight: 300;
}
.login-page icon {
	display: inline-block;
	width: 8rem;
	height: 8rem;
	background-size: 100% 100%;
	vertical-align: top;
	margin:5px;
    image-rendering: auto;
    -ms-interpolation-mode: bicubic; 
}
.login-page .error {
	display: block;
	margin-top: 20px;
	font-family: Verdana;
	font-weight: 100;
	font-size: 2.4rem;
	color: red;
}
.login-page .content {
	display: block;
	border-top: 3px solid #CCC;
	width:100%;
	text-align:center;
	padding-bottom: 20px;
}
.login-page input[type="text"],
.login-page input[type="password"] {
	border: none;
	font-family: verdana;
	font-size: 2.4rem;
	/*
	border-left: 2px solid #5FA2ED;
	border-bottom: 2px solid #5FA2ED;
	*/
	border: 1px solid #5FA2ED;
	margin-top: 20px;
}
.login-page input[type="submit"] {
	height: 5rem;
	margin-top: 20px;
	font-size: 2rem;
}
.login-page input[type="button"] {
	height: 5rem;
	margin-top: 20px;
	font-size: 2rem;
	border-radius: 0.5rem;
	border: 1px solid #999;
	background: #DDD;
}
.menu-page {
	background: url('images/pozadina.jpg');
	background-size: 100% 100%;
	background-repeat: repeat-x;
	background-attachment: fixed;
}
.menu-page .left-menu {
	width:100%;
	background: #5FA2ED;
	max-width: 0rem;
	padding-left: 0;
	padding-top: 2rem;
	transition: max-width 0.5s, padding-left 0.7s;
	overflow: hidden;
	display: inline-block;
	vertical-align: top;
	border-right: 1px solid #666;
	white-space: normal;
}
.menu-page icon {
	display:block;
	background-size: 6.5rem 6.5rem;
	background-repeat: no-repeat;
	background-position: 0 0;
	width: 6.5rem;
	height: 9.5rem;
	padding-top: 6.7rem;
	text-align: center;
	font-size: 1.2rem;
	color: #000;
    image-rendering: auto;
    -ms-interpolation-mode: bicubic;
	transition: width 0.7s, background-position 0.7s;
	cursor: pointer;
}
.menu-page icon:hover {
	width: 10rem;
	background-position: 1.75rem 0;
	transition: width 0s, background-position 0s;
}
.left-menu hr {
	display:block;
	width:100%;
	border: none;
	border-top: 1px solid #000;
}
.copyright {
	display:block;
	text-align:right;
	width:100%;
	cursor:pointer;
}
.copyright .title {
	font-size:1.8rem;
	font-weight:bold;
	font-style: italic;
	text-decoration: underline;
}
.copyright .underline {
	font-size:1.4rem;
	font-weight:100;
	font-style: normal;
}
/* ****************************************** papir, okvir, sastavnica ************************************ */
.main-paper {
	display:inline-block;
	width:82%;
	/*height:92%;*/
	border: none;
	box-shadow: 5px 5px 5px rgba(0,0,0,0.3);
	background: #FFF;
	padding: 1rem;
	margin-left:2rem;
	margin-top: 2rem;
	margin-bottom: 2rem;
	text-align: right;
	vertical-align: top;
}
.main-paper .content {
	display:block;
	width: 100%;
	height: 91%;
	font-size: 2rem;
	padding: 0 0.8rem 0.8rem 0.8rem;
	clear:both;
	white-space: normal;
	overflow: hidden;
	overflow-y: auto;
}
.main-paper .content .logo {
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 20px;
	background: url('images/logo.png');
	background-size: 100% auto;
	background-repeat: no-repeat;
	width: 48rem;
	height: 26rem;
}
.main-paper .content h1 {
	font-size: 2.4rem;
	font-weight: 100;
	font-style: italic;
}

.main-paper .content label {
	font-size: 1.8rem;
}

.main-paper .content input[type="text"],
.main-paper .content input[type="number"],
.main-paper .content input[type="search"],
.main-paper .content input[type="checkbox"] {
	border: none;
	font-family: verdana;
	font-size: 2.4rem;
	border: 1px solid #5FA2ED;
	color: #000;
	margin-bottom: var(--margin-bottom);
	vertical-align: top;
}
.main-paper .content input[type="checkbox"] {
	width:2.5rem;
	height:2.5rem;
}
.button-height {
	height:4.5rem;
}
.main-paper .content input[type="button"] {
	height: 4.5rem;
	/*margin-bottom: 0.8rem;
	margin-right: 0.8rem;*/
	font-size: 1.6rem;
	vertical-align: top;
	border-radius: 0.5rem;
	border: 1px solid #999;
	background: #DDD;
}
.main-paper .content textarea {
	border: none;
	font-family: verdana;
	font-size: 2.4rem;
	border: 1px solid #5FA2ED;
	color: #000;
	margin-bottom: var(--margin-bottom);
}
.main-paper .content select {
	border: none;
	font-family: verdana;
	font-size: 2.4rem;
	border: 1px solid #5FA2ED;
	color: #000;
	margin-bottom: var(--margin-bottom);
	vertical-align: top;
	background: #FFF;
}
.main-paper .content hr {
	display:block;
	border: none;
	border-bottom: 1px solid #CCC;
	margin-bottom: 0.8rem;
	margin-top:0px;
	width:100%;
}
.main-paper .content .topmenu {
	/*width:74%;
	position:fixed;*/
	width:100%;
	background:#EEE;
	padding:0.4rem;
}
.main-paper .content .topmenu-fixed {
	width:74%;
	position:fixed;
	background:#EEE;
	padding:0.4rem;
}
.main-paper .content .topclear {
	margin-top:7rem;
}
.main-border {
	display: inline-block;
	width: 95%;
	height: 100%;
	border: 2px solid #999;
	background: #FFF;
	text-align:left;
}
.main-border .right_aligned {
	width:100%;
	text-align: right;
}
.main-border .sastavnica {
	border: none;
	font-size: 1.2rem;
	border-spacing: 0;
    border-collapse: collapse;
	background: #FFF;
	float:right;
}
.main-border .sastavnica td {
	border: 1px solid #999;
	padding: 8px;
	white-space: nowrap;
	height: 5rem;
}
.sastavnica #korisnik {
	display:block;
	font-size: 1.8rem;
	font-style: italic;
	font-weight: 100;
}
.sastavnica #podruznica {
	display:block;
	font-size: 1.8rem;
	font-style: italic;
	font-weight: 100;
}
.sastavnica #naslov {
	display:block;
	font-size: 2.4rem;
	font-style: italic;
	font-weight: bold;
}
.sastavnica #list {
	display:block;
	font-size: 2rem;
	font-style: italic;
	font-weight: bold;
}
/* *********************** glavna lista (grid) ********************************** */
.lista {
	vertical-align:bottom;
	width:98%;
	height:55%;
}
.lista table {
	width: 100%;
	border-spacing: 0;
    border-collapse: collapse;
	cursor: default;
	font-size: 1.5rem;
	table-layout:fixed;
}
.lista td {
	border: 1px solid #CCC;
	padding: 8px;
	background: none;
	overflow: hidden;
}
.lista .content tr:hover {
	background: #EEE;
	border:2px solid #5FA2ED;
}
.lista th {
	background: #999;
	color: #FFF;
	font-size: 1.8rem;
	font-weight: 100;
	padding-top: 7px;
	border: 1px solid #FFF;
	padding: 8px;
	overflow: hidden;
}
.lista .content {
	padding:0;
	margin:0;
	overflow: hidden;
	overflow-y: scroll;
	border: 1px solid #999;
	height:30rem
}
.noline {
	border:none!important;
}
.topline {
	border-top:2px solid #999;
}
.topline td,
.noline td {
	background: #EEE;
}
.topline td[colspan="8"],
.noline td[colspan="8"] {
	border:none!important;
	background: none;
}
/* **************************************** max-width: 1000px *********************************** */
@media (max-width:1000px) {
	.menu-page .left-menu {
		width: 100%;
		height: 100%;
		max-height: 0rem;
		max-width: none;
		padding-top: 0.5rem;
		padding-left: 2rem;
		transition: max-height 0.5s, padding-top 0.7s;
		display: block;
		border:none;
		border-bottom: 1px solid #666;
		float:none;
	}
	.main-paper .content .topmenu {
		/*width:85%;
		position:fixed;*/
		width:100%;
		background:#EEE;
		padding:0.4rem;
	}
	.main-paper .content .topmenu-fixed {
		width:85%;
		position:fixed;
		background:#EEE;
		padding:0.4rem;
	}	
	.main-paper .content .topclear {
		margin-top:7rem;
	}
	.left-menu hr {
		display:inline-block;
		height:100%;
		width:1px;
		border: none;
		border-left: 1px solid #000;
		margin-right: 2rem;
		vertical-align: top;
	}
	.menu-page icon {
		display:inline-block;
		transition: top 0.7s;
		margin-right: 2rem;
	}
	.menu-page icon:hover {
		width: 6.5rem;
		position:relative;
		top: 2rem;
		left: 0;
		background-position: 0 0;
		transition: top 0s;
	}
	.main-paper {
		width:95%;
		/* height:85%; */
	}
	.lista .content {
		height:85rem;
	}
}
/* **************************************** height> 768px *********************************** */
@media (min-height:768px) {
	.main-paper {
		height:95%;
	}
	.lista .content {
		height:100%;
	}
}

/* ********************************* slike ********************************** */
.slika_stroja {
	text-align: center;
	cursor:pointer;
	vertical-align: top;
	display: inline-block;
}
.slika_stroja img {
	width: 32rem;
	height: 24rem;
	background: url('images/mm.png');
}
.selection {
	height:34px;
	border: 1px solid #CCC;
	padding: 0;
	margin: 0;
	margin-right: 10px;
}
#upload {
	width: 300px;
	height: 200px;
	border: 1px solid #999;
	text-align: center;
	padding-top: 10px;
	-webkit-box-shadow: rgba(0, 0, 0, 0.4) 5px 5px 10px;
	-moz-box-shadow: rgba(0, 0, 0, 0.4) 5px 5px 10px;
	box-shadow: rgba(0, 0, 0, 0.4) 5px 5px 10px;
	border-radius: 7px 7px 7px 7px;
	-moz-border-radius: 7px 7px 7px 7px;
  	-webkit-border: 7px 7px 7px 7px;
	display: none;
	background: #FFF;
	font: bold 1.2rem 'Open Sans Condensed', sans-serif;
}
#upload_img {
	width: 200px;
	height: 200px;
	border: 1px solid #999;
}
.gallery_container {
	width: 210px;
	border: 1px solid #999;
	margin-right: 10px;
	display: inline-block;
	margin-bottom: 15px;
	text-align: center;
	padding-bottom:10px;
}
.gallery_image {
	width: 200px;
	height: 200px;
	border: 1px solid #CCC;
	margin-top:5px;
}
.gallery_image img {
	width: 100%;
	height: 100%;
}
.gallery_caption {
	width: 200px;
	height: 35px;
	overflow: hidden;
	font: 1.5rem arial, sans-serif;
}
th {
	background: #999;
	color: #FFF;
	font-size: 1.8rem;
	font-weight: 100;
	padding-top: 7px;
	border: 1px solid #FFF;
	padding: 8px;
	text-align: left;
}
.obavezno label {
	font-weight:bold;
}
.obavezno input,
.obavezno select {
	border-width: 2px!important;
	margin-top: -1px;
	background: #EEE!important;
}
.tab{
	background: #EEE;
	border: 1px solid #999;
	padding-top:5px;
	padding-bottom:2px;
	margin-right:3px;
	padding-left:10px;
	padding-right:10px;
	border-radius: 5px 5px 0px 0px;
	position: relative;
	top: 1px;
	cursor:pointer;
	color:#999;
}
.tab:hover{
	border-top: 3px solid #FF6600;
	padding-top:3px;
}
.active_tab{
	background: #FFF;
	position:relative;
	top:1px;
	border: 1px solid #999;
	border-bottom: 1px solid #FFF;
	padding-top:7px;
	padding-bottom:3px;
	margin-right:3px;
	border-radius: 5px 5px 0px 0px;
	padding-left:10px;
	padding-right:10px;
}
.underline td {
	border-bottom:1px solid #CCC;
}
/* ********************************* kalendar ********************************** */
.kalendar {
	font-family:Arial;
	font-size:16px;
	display: inline-block;
	vertical-align:top;
	margin: 1rem;
}
.kalendar th {
	font-size:16px;
	font-weight:normal;
	background: #999;
	color:#FFF;
	padding:2px 5px 2px 5px;
}
.kalendar td {
	border-spacing: 0;
	border-collapse: collapse;
	border: 1px solid #999;
	font-size:12px;
	text-align:center;
	cursor:pointer;
	width:4rem;
}
.kalendar td:hover {
	border: 2px solid #666;
}