@charset "utf-8";
/* CSS Document */


body {
	margin: 0;
	padding: 0;
	font-family: Consolas, Menlo, monospace;
	background: url("images/background.jpeg") no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
h1, h2, h3, h4, h5, h6 {
	color: #164E66; 
}
h1 {font-size: 38px; }
h2 {font-size: 30px; }
h3 {font-size: 26px; }
h4 {font-size: 24px; }
h5 {font-size: 22px; }
h6 {font-size: 18px; }

a:link,
a:visited {
	color: #011d3d;
	text-decoration: none;
}
a:hover {
	color: #011d3d;
	text-decoration: underline;
}
a:active {
	color: #777;
}

img {
	vertical-align: bottom;
	max-width: 100%;
}
#wrapper {
	width: 85%;
	margin: 0 auto 40px;
	margin-top: 20px;
}

/* The browser window */
.container {
    border: 3px solid #555058	;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
	width: 100%;
  }
  
  /* Container for columns and the top "toolbar" */
  .row {
    padding: 10px;
    /* background: #333333; */
	background: #1d222d;
    border-radius: 10px;
	margin-bottom: 15px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);

  }
  
  /* Create three unequal columns that floats next to each other */
  .column {
    float: left;
  }
  
  .left {
    width: 20%;
  }
  
  .right {
    width: 20%;
  }
  
  .middle {
    width: 60%;
  }
  
  /* Clear floats after the columns */
  .row:after {
    content: "";
    display: table;
    clear: both;
  }
  
  /* Three dots */
  .dot {
    margin-top: 4px;
    height: 12px;
    width: 12px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
  }
  
  /* Style the input field */
  input[type=text] {
    width: 100%;
    border-radius: 3px;
    border: none;
    background-color: white;
    margin-top: -8px;
    height: 25px;
    color: #666;
    padding: 5px;
  }

  .circles-parent { text-align:center; }
.circle         { background-color:green; border-radius:50%; display:inline-block; margin:0 15px; }



#central {
	display: flex;
	justify-content: space-between;
}

#main {
	margin-top: 5px;
	margin-right: 5px;
	margin-bottom: 5px;
	flex-basis: 23%;
	background-color: #282a2ef5;
	color: white;
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}
#sidebar {
	margin-top: 5px;
	margin-left: 5px;
	margin-bottom: 5px;
	flex-basis: 79%;
	background: #292a2ffa;
    border-radius: 10px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
	min-height: 500px;

}

#main_text {
	margin-left: 22px;
	margin-bottom: 22px;
	margin-right: 10px;
	color: #7f8c98;
	color: #FFF;
	font-family: Consolas, Menlo, monospace;
	padding: 5px;
}

#proba {
	margin: 22px;
	margin-bottom: 10px;
}

input[type="text"], textarea {

	/* background-color : #44434a	;  */
	background-color: #555b69;
	color: white;
	border-radius: 10px;
	text-align: center;
	font-size: 13pt;
  }

  table {
	border-collapse: collapse;
	width: 100%;
	overflow:auto;
	table-layout:fixed;
  }
  
  th, td {
	padding: 8px;
	text-align: left;
	border-bottom: 1px solid #ddd;
  }
  table a:link,
table a:visited {
	color: #FFF;
	text-decoration: none;
	text-decoration: underline;
}
  table a {
	  color: white;
	  text-decoration: underline;
  }
  tr:hover {background-color: #033761;}

  #prvi_red:hover {
	  background-color: #292a2f;
  }
  pre {
	white-space: pre-wrap; /* Allows for wrapping while preserving whitespace */
}

  .tooltip {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	/* height: 55px; */
	/* border-bottom: 1px dotted black; */
  }
  
  .tooltip .tooltiptext {
	visibility: hidden;
	width: 120px;
	background-color: #555;
	color: #fff;
	text-align: center;
	border-radius: 6px;
	padding: 5px 0;
	position: absolute;
	z-index: 1;
	bottom: 100%;
	left: 50%;
	margin-left: -60px;
	opacity: 0;
	transition: opacity 0.3s;
  }
  
  .tooltip .tooltiptext::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: #555 transparent transparent transparent;
  }
  
  .tooltip:hover .tooltiptext {
	visibility: visible;
	opacity: 1;
  }
 

  .box {
	  padding: 10px;
	  border-radius: 10px;
	  display: flex;
	  flex-flow:  wrap;
	  flex-direction: row;
	  justify-content: center ;
	  align-content: space-between;
	  padding-bottom: 20px;
  }

  .item {
	/* background-image: linear-gradient(rgb(33, 59, 116), rgb(30, 29, 70)); */
	background: linear-gradient(45deg,rgb(52, 70, 110), rgb(30, 29, 70));  ;
	color: rgb(255, 169, 10);
	margin: 10px;
	flex-basis: 40%;
	border-radius: 10px;
	padding: 10px;
	min-width: 250px;
	/* display: inline-block; */
  }

  .item b {
	margin: 40px;
	
  }

  .item ul {
	list-style-type: none; /* Remove bullets */
	padding: 20; /* Remove padding */
	margin: 0; /* Remove margins */
	gap: 0px;
	margin-top: 15px;
  }

  .item ul li {
	  text-decoration: none;
	  margin: 0;
	  color: white;
  }

  .item h4 {
	  color: #31c1ff;
	text-align: center;  
}

#footer {
	background-image: url("images/footer_img.png");
 	background-color: #313131	;
	 background-repeat: no-repeat;
	 background-size: auto;
	color: #FFF;
	margin-top: 15px;
	border-radius: 10px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);

}
#footer h1, 
#footer h2, 
#footer h3, 
#footer h4, 
#footer h5, 
#footer h6 {
	color: #FFF;
}


#footerInfo {
	display: flex;
	min-height: 220px;
}
#footerLogo {
	margin-right: auto;
}
.footerText {
	flex-basis: 230px;
	margin-left: 20px;
	height: 200px;
}
.footerText h2 {
	margin: 0 0 12px;
}


#footer a:link,
#footer a:visited {
	color: #FFF;
}

#footer_content {
	position: absolute;
	margin: 20px;
	margin-top: 50px;
	font-family: Consolas, Menlo, monospace;
	color: #d8d7d9;
}

#recordBtn {
	position: absolute;
	margin: 20px;
	margin-top: 5px;
	font-family: Consolas, Menlo, monospace;
	color: red;
	width: 10px;
	height: 10px;
	border-radius: 10px;
}


.navigacija {
    list-style:none;
     margin:0; padding:0;
}
.navigacija li {
    margin:0; padding:35;
  	min-height:50px; 
	font-size: 16px;
	/* text-decoration: underline; */
}

#nav_title {
	padding: 5px;
	/* background: linear-gradient(180deg,#575258,#514d54); */
	/* height: 35px; */
	background-color: #1d222d;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
#nav_title img {
	align-self: center;
	background-image: url('images/ikonice/1.png');
	width: 30px;
	height: 30px;
}
#nav_title img:hover {
	cursor:pointer;
	scale: 1.2;
}

#nav_title_main {
	padding: 2px;
	background-color:#28202c;/* #555058;*/
	/* height: 35px; */
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}


#footer_bar {
	padding: 4px;
	border-top: 3px solid black;
	border-bottom: 3px solid black;
	/* background-color: #271f2c; */
	background-color: #1d222d;
	height: 35px;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

#footer_bar img {
	align-self: center;
	background-image: url('images/ikonice/1.png');
	margin-right: 10px;
	height: 30px;
}

#footer_bar img:hover {
	cursor:pointer;
	scale: 1.2;
}

.navigacija ul li a:link,
.navigacija ul li a:visited {
	color: #FFF;
	text-decoration: none;
}
.navigacija ul li a:hover {
	padding: 5px;
	background: #052B3B;
    border-radius: 3px;
}
.navigacija ul li a:active {
	background: #052B3B;
}

.navigacija ul li a {
	padding: 5px;
	font-size: 14pt;
}

.parent {
	width: 100%;
  }
  .child {
	width: 30%;
	display: inline-block;
	vertical-align: middle;
	padding-left: 100px;
  }

  .myImg {
	border-radius: 10px;
	cursor: pointer;
	transition: 0.3s;
  }

  .console {
    width: 400px;
    background-color: #040417b3;
    color: white;
    border: 1px solid #333;
    border-radius: 5px;
	margin: 10px;
}

.title-bar {
    background-color: #b4b4b4;
    display: flex;
    align-items: center;
    padding: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.title-bar .button {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #FF5F52; /* Close button */
    margin-right: 5px;
}

.title-bar .button.minimize-button {
    background-color: #FFBD2E; /* Minimize button */
}

.title-bar .button.maximize-button {
    background-color: #28C941; /* Maximize button */
}

.title {
    color: rgb(6, 2, 46);
    flex-grow: 1;
	text-align: center;
	font-weight: bold;
	padding-right: 30px;
}

.console-content {
    padding: 10px;
}

h4 {
    font-size: 16px; /* Promena veličine naslova */
}

hr {
    border: none;
    border-top: 1px solid #333;
    margin: 10px 0;
}

b {
    color: #f6b234;
    display: block;
    margin: 5px 0;
}

.console-content ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.console-content ul li {
    text-decoration: none;
    margin: 0;
    color: rgb(220, 220, 220);
    padding-left: 20px;
}

.console-content ul li:before {
    content: "$";
    color: #1ac233;
    margin-right: 5px;
}
  
  .myImg:hover {
	  opacity: 0.7;}
  .modal {
	z-index:1;
	display:none;
	padding-top:10px;
	position:fixed;
	left:0;
	top:0;
	width:100%;
	height:100%;
	overflow:auto;
	background-color:rgb(0,0,0);
	background-color:rgba(0,0,0,0.8)
	}
	
	.modal-content{
	margin: auto;
	display: block;
		position: absolute;
	  top: 50%;
	  left: 50%;
	  transform: translate(-50%, -50%);
	}

	.collapsible {
		background-color: #58545c;
		color: rgb(153, 223, 255);
		cursor: pointer;
		padding: 18px;
		width: 100%;
		border: none;
		text-align: left;
		outline: none;
		font-size: 15px;
		border-radius: 10px;
		margin-bottom: 4px;
		margin-top: 4px;
		font-weight: bold;
	  }
	  
	  .active, .collapsible:hover {
		background-color: #60697a;
	  }
	  
	  .collapsible:after {
		/* content: '\002B'; */
		content: '👇';
		color: white;
		font-weight: bold;
		float: right;
		margin-left: 5px;
	  }
	  
	  .active:after {
		/* content: "\2212"; */
		content: '👆';
	  }
	  
	  .content {
		padding: 0 18px;
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.2s ease-out;
		background-color: #1d2b34;
		margin-bottom: 5px;
		border-radius: 10px;
	  }
	
	
	.close {
	text-decoration:none;float:right;font-size:24px;font-weight:bold;color:white
	}
	.container1 {
	width:200px;
	display:inline-block;
	}
	.modal-content, #caption {   
  
		-webkit-animation-name: zoom;
		-webkit-animation-duration: 0.6s;
		animation-name: zoom;
		animation-duration: 0s;
	}
	
	@-webkit-keyframes zoom {
		from {-webkit-transform:scale(0)} 
		to {-webkit-transform:scale(1)}
	}
	
	@keyframes zoom {
		from {transform:scale(0)} 
		to {transform:scale(1)}
	}
	

@-webkit-keyframes zoom {
  from {-webkit-transform:scale(0)}
  to {-webkit-transform:scale(1)}
}

@keyframes zoom {
  from {transform:scale(0)}
  to {transform:scale(1)}
}
.footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 20px;
}

.rectangle {
    display: inline-block;
    width: 100%; /* Pravougaonici će zauzeti celu širinu footera */
    height: 50px; /* Prilagodite visinu prema potrebama */
    margin: 0; /* Bez razmaka između pravougaonika */
}

.leftFooter {
    background-color: #1d222d	;
	border-right: 3px solid black;
	border-bottom:  3px solid black;
	height:auto;
	padding:15px;
}

.rightFooter {
    background-color: #292a2f; 
	border-bottom:  3px solid black;
	height:auto;
	padding:15px;


}

/* The Close Button */
.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

@media only screen and (max-width: 700px){
  .modal-content {
    width: 100%;
  }

@media screen and (min-width:768px) and (max-width:1024px) {
	
	#wrapper {
		width: 85%;
	}
	#header {
		display: block;
		text-align: center;
	}
	#nav ul {
		justify-content: center;
	}
	.product {
		flex-basis: 220px;
	}

	#main {
		flex-basis: 400px;
	}
	#sidebar {
		flex-basis: 260px;
		padding: 10px;
	}
	
	#footerInfo {
		flex-wrap: wrap;
		justify-content: center;
		text-align: center;
	}
	#footerLogo {
		width: 100%;
		margin-bottom: 40px;
	}
	.footerText {
		margin: 0 20px;
	}
	
}
@media screen and (max-width:767px) {
	#wrapper {
		width: 85%;
	}
	#header, #nav ul {
		display: block;
		text-align: center;
	}
	#hero {
		background: #333;
		height: auto;
		display: block;
	}
	.heroText {
		background: none;
		padding: 20px;
		color: #FFF;
	}
	#products {
		display: block;
	}
	.product {
		margin-bottom: 20px;
		text-align: center;
	}
	#central {
		display: block;
	}
	#footerInfo {
		display: block;
		text-align: center;
	}
	.footerText {
		margin: 20px 0;
	}
	table {
		border-collapse: collapse;
		display:block;
		width: 100%;
		table-layout:fixed;
		overflow:scroll;
	  }	
}
}

 code {
	display: block;
	white-space: pre-wrap   ;
	background-color: rgba(72, 84, 109, 0.8);
	border-radius: 10px;
	padding: 20px;
	line-height: 30px;
  }